Михаиллл
Михаиллл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
                              e
                              • ehot
                              • April 1, 2024, 2:29 a.m.

                              C++ - Тест 003. Условия и циклы

                              • Result:78points,
                              • Rating points2
                              B

                              C++ - Test 002. Constants

                              • Result:16points,
                              • Rating points-10
                              B

                              C++ - Test 001. The first program and data types

                              • Result:46points,
                              • Rating points-6
                              Last comments
                              k
                              kmssrFeb. 9, 2024, 7:43 a.m.
                              Qt Linux - Lesson 001. Autorun Qt application under Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
                              Qt WinAPI - Lesson 007. Working with ICMP Ping in Qt Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
                              EVA
                              EVADec. 25, 2023, 11:30 p.m.
                              Boost - static linking in CMake project under Windows Ошибка LNK1104 часто возникает, когда компоновщик не может найти или открыть файл библиотеки. В вашем случае, это файл libboost_locale-vc142-mt-gd-x64-1_74.lib из библиотеки Boost для C+…
                              J
                              JonnyJoDec. 25, 2023, 9:38 p.m.
                              Boost - static linking in CMake project under Windows Сделал всё по-как у вас, но выдаёт ошибку [build] LINK : fatal error LNK1104: не удается открыть файл "libboost_locale-vc142-mt-gd-x64-1_74.lib" Хоть убей, не могу понять в чём дел…
                              G
                              GvozdikDec. 19, 2023, 10:01 a.m.
                              Qt/C++ - Lesson 056. Connecting the Boost library in Qt for MinGW and MSVC compilers Для решения твой проблемы добавь в файл .pro строчку "LIBS += -lws2_32" она решит проблему , лично мне помогло.
                              Now discuss on the forum
                              G
                              GarApril 22, 2024, 5:46 p.m.
                              Clipboard Как скопировать окно целиком в clipb?
                              DA
                              Dr Gangil AcademicsApril 20, 2024, 7:45 p.m.
                              Unlock Your Aesthetic Potential: Explore MSC in Facial Aesthetics and Cosmetology in India Embark on a transformative journey with an msc in facial aesthetics and cosmetology in india . Delve into the intricate world of beauty and rejuvenation, guided by expert faculty and …
                              a
                              a_vlasovApril 14, 2024, 6:41 p.m.
                              Мобильное приложение на C++Qt и бэкенд к нему на Django Rest Framework Евгений, добрый день! Такой вопрос. Верно ли следующее утверждение: Любое Android-приложение, написанное на Java/Kotlin чисто теоретически (пусть и с большими трудностями) можно написать и на C+…
                              Павел Дорофеев
                              Павел ДорофеевApril 14, 2024, 2:35 p.m.
                              QTableWidget с 2 заголовками Вот тут есть кастомный QTableView с многорядностью проект поддерживается, обращайтесь
                              f
                              fastrexApril 4, 2024, 4:47 p.m.
                              Вернуть старое поведение QComboBox, не менять индекс при resetModel Добрый день! У нас много проектов в которых используется QComboBox, в версии 5.5.1, когда модель испускает сигнал resetModel, currentIndex не менялся. В версии 5.15 при resetModel происходит try…

                              Follow us in social networks