Михаиллл
МихаилллMarch 28, 2019, 3:59 a.m.

Как в QML поставить картинку на кнопку

QML, button

Добрый день.

Как в QML поставить картинку на кнопку?

Изображения я пом естил в ресурсы:

We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.

Do you like it? Share on social networks!

14
Evgenii Legotckoi
  • March 28, 2019, 4:56 a.m.

Добрый день.

Ну думаю, что будет примерно так

ToolButton {
    text: qsTr("⋮")
    onClicked: { 
        // ToDo sometthing
    }
    icon.source: "qrc:/images/black.png"
}
    Михаиллл
    • March 28, 2019, 9 a.m.
    • (edited)

    вот так работает, но картинка как иконка, занимает часть кнопки. но как ее растянуть на всю кнопку?

    icon.source: "qrc:/images/images/black.png"
    
      Михаиллл
      • March 28, 2019, 9:08 a.m.

      Вот так можно за кнопекой поставить рисунок, но не заменит рисунок кнопки нужным рисунком

              Image {
                  id: name
                  source: "qrc:/images/images/black.png"
              }
      
        Михаиллл
        • March 28, 2019, 11:11 a.m.

        Так вы не знаете, как это можно сделать?

          Evgenii Legotckoi
          • March 28, 2019, 11:44 a.m.

          Помимо icon.source есть ещё свойства icon.width и icon.height, которыми можно задать высоту и ширину изображения.

          Либо можно без кнопки сделать

          import QtQuick 2.9
          import QtQuick.Window 2.2
          import QtQuick.Controls 2.2
          
          Window {
              visible: true
              width: 640
              height: 480
              title: qsTr("Hello World")
          
              MouseArea {
                  anchors.centerIn: parent
                  width: 100
                  height: 100
          
                  Image {
                      anchors.fill: parent
                      id: name
                      source: "qrc:/account-card-details.png"
                  }
          
                  onPressed: {
                      // ToDo something
                      console.log("hello")
                  }
              }
          }
          
            Михаиллл
            • March 28, 2019, 12:22 p.m.

            я с таким сталкивался в qt редакторе, там тоже особым сойством задавалась картинка на весь объем кнопки, жалко что не помню каким и не могу провести аналогию. наверняка тут тоже должно быть что то похожее

              Evgenii Legotckoi
              • March 28, 2019, 12:27 p.m.

              Не обязательно. Долгое время в Quick.Controls 2 не было обычного TableView

              Что касается методов кнопки, то посмотрите тогда полный список в документации

              Также обратите внимание на свойство display

                Михаиллл
                • March 29, 2019, 4:50 a.m.
                • (edited)

                Попробовал задание размеров иконки, но к желаемому результату не привело.

                Вспомнил, с помощью метода

                button->setStyleSheet("background-image: url(адрес картинки)")
                

                можно задать картинку на кнопку в Qt дизайнере.
                Я в QML пока не нашел похожего. Может Вы знвете аналог?

                  Михаиллл
                  • March 29, 2019, 6:41 a.m.

                  или может быть, как вариант кастыли, поверх кнопки поставить картинку, но будет ли тогда работать кнопка?

                    Михаиллл
                    • March 29, 2019, 6:46 a.m.
                    • The answer was marked as a solution.

                    Нашел, вот так картинка заполняет кнопку:

                    Image {
                                anchors.fill: parent
                                source: "qrc:/images/images/black.png"
                                fillMode: Image.Tile
                            }
                    

                    Тут есть еще другие решения и другие костыли

                      Михаиллл
                      • March 29, 2019, 6:55 a.m.

                      Вот только при растягивании кнопки картинки замостились, а нужно одну картинку растянуть на кнопку.
                      Не знаете, как это можно сделать?

                        Михаиллл
                        • March 29, 2019, 7:12 a.m.

                        Поменял режим заливки на Stretch и заработало

                          Evgenii Legotckoi
                          • March 29, 2019, 8:27 a.m.

                          Это точно не костыли, это обычная вёрстка в QML

                            Михаиллл
                            • March 29, 2019, 9:28 a.m.

                            ясно

                              Comments

                              Only authorized users can post comments.
                              Please, Log in or Sign up
                              AD

                              C ++ - Test 004. Pointers, Arrays and Loops

                              • Result:50points,
                              • Rating points-4
                              m

                              C ++ - Test 004. Pointers, Arrays and Loops

                              • Result:80points,
                              • Rating points4
                              m

                              C ++ - Test 004. Pointers, Arrays and Loops

                              • Result:20points,
                              • Rating points-10
                              Last comments
                              Evgenii Legotckoi
                              Evgenii LegotckoiNov. 1, 2024, 12:37 a.m.
                              Django - Lesson 064. How to write a Python Markdown extension Добрый день. Да, можно. Либо через такие же плагины, либо с постобработкой через python библиотеку Beautiful Soup
                              A
                              ALO1ZEOct. 19, 2024, 6:19 p.m.
                              Fb3 file reader on Qt Creator Подскажите как это запустить? Я не шарю в программировании и кодинге. Скачал и установаил Qt, но куча ошибок выдается и не запустить. А очень надо fb3 переконвертировать в html
                              ИМ
                              Игорь МаксимовOct. 5, 2024, 5:51 p.m.
                              Django - Lesson 064. How to write a Python Markdown extension Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку: <ul> <li></li> <li></l…
                              d
                              dblas5July 5, 2024, 9:02 p.m.
                              QML - Lesson 016. SQLite database and the working with it in QML Qt Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
                              k
                              kmssrFeb. 9, 2024, 5:43 a.m.
                              Qt Linux - Lesson 001. Autorun Qt application under Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
                              Now discuss on the forum
                              m
                              moogoNov. 22, 2024, 6:17 p.m.
                              Mosquito Spray System Effective Mosquito Systems for Backyard | Eco-Friendly Misting Control Device & Repellent Spray - Moogo ; Upgrade your backyard with our mosquito-repellent device! Our misters conce…
                              Evgenii Legotckoi
                              Evgenii LegotckoiJune 25, 2024, 1:11 a.m.
                              добавить qlineseries в функции Я тут. Работы оень много. Отправил его в бан.
                              t
                              tonypeachey1Nov. 15, 2024, 5:04 p.m.
                              google domain [url=https://google.com/]domain[/url] domain [http://www.example.com link title]
                              NSProject
                              NSProjectJune 4, 2022, 1:49 p.m.
                              Всё ещё разбираюсь с кешем. В следствии прочтения данной статьи. Я принял для себя решение сделать кеширование свойств менеджера модели LikeDislike. И так как установка evileg_core для меня не была возможна, ибо он писался…

                              Follow us in social networks