Михаиллл
28 марта 2019 г. 13:59

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

QML, button

Добрый день.

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

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

2
Вопрос задан по статьеQML - Урок 002. Custom Button in QML Android

Вам это нравится? Поделитесь в социальных сетях!

14
Evgenii Legotckoi
  • 28 марта 2019 г. 14:56

Добрый день.

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

  1. ToolButton {
  2. text: qsTr("⋮")
  3. onClicked: {
  4. // ToDo sometthing
  5. }
  6. icon.source: "qrc:/images/black.png"
  7. }
    Михаиллл
    • 28 марта 2019 г. 19:00
    • (ред.)

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

    1. icon.source: "qrc:/images/images/black.png"
      Михаиллл
      • 28 марта 2019 г. 19:08

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

      1. Image {
      2. id: name
      3. source: "qrc:/images/images/black.png"
      4. }
        Михаиллл
        • 28 марта 2019 г. 21:11

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

          Evgenii Legotckoi
          • 28 марта 2019 г. 21:44

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

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

          1. import QtQuick 2.9
          2. import QtQuick.Window 2.2
          3. import QtQuick.Controls 2.2
          4.  
          5. Window {
          6. visible: true
          7. width: 640
          8. height: 480
          9. title: qsTr("Hello World")
          10.  
          11. MouseArea {
          12. anchors.centerIn: parent
          13. width: 100
          14. height: 100
          15.  
          16. Image {
          17. anchors.fill: parent
          18. id: name
          19. source: "qrc:/account-card-details.png"
          20. }
          21.  
          22. onPressed: {
          23. // ToDo something
          24. console.log("hello")
          25. }
          26. }
          27. }
            Михаиллл
            • 28 марта 2019 г. 22:22

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

              Evgenii Legotckoi
              • 28 марта 2019 г. 22:27

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

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

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

                Михаиллл
                • 29 марта 2019 г. 14:50
                • (ред.)

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

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

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

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

                  Михаиллл
                  • 29 марта 2019 г. 16:41

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

                    Михаиллл
                    • 29 марта 2019 г. 16:46
                    • Ответ был помечен как решение.

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

                    1. Image {
                    2. anchors.fill: parent
                    3. source: "qrc:/images/images/black.png"
                    4. fillMode: Image.Tile
                    5. }

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

                      Михаиллл
                      • 29 марта 2019 г. 16:55

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

                        Михаиллл
                        • 29 марта 2019 г. 17:12

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

                          Evgenii Legotckoi
                          • 29 марта 2019 г. 18:27

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

                            Михаиллл
                            • 29 марта 2019 г. 19:28

                            ясно

                              Комментарии

                              Только авторизованные пользователи могут публиковать комментарии.
                              Пожалуйста, авторизуйтесь или зарегистрируйтесь