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

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

QML, button

Добрый день.

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

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

Рекомендуем хостинг TIMEWEB
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.

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

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

Добрый день.

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

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

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

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

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

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

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

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

          Помимо 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")
                  }
              }
          }
          
            Михаиллл
            • 28 марта 2019 г. 12:22

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

                            ясно

                              Комментарии

                              Только авторизованные пользователи могут публиковать комментарии.
                              Пожалуйста, авторизуйтесь или зарегистрируйтесь
                              г
                              • ги
                              • 24 апреля 2024 г. 1:51

                              C++ - Тест 005. Структуры и Классы

                              • Результат:41баллов,
                              • Очки рейтинга-8
                              l
                              • laei
                              • 23 апреля 2024 г. 19:19

                              C++ - Тест 004. Указатели, Массивы и Циклы

                              • Результат:10баллов,
                              • Очки рейтинга-10
                              l
                              • laei
                              • 23 апреля 2024 г. 19:17

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

                              • Результат:50баллов,
                              • Очки рейтинга-4
                              Последние комментарии
                              k
                              kmssr9 февраля 2024 г. 5:43
                              Qt Linux - Урок 001. Автозапуск Qt приложения под Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
                              АК
                              Анатолий Кононенко5 февраля 2024 г. 12:50
                              Qt WinAPI - Урок 007. Работаем с ICMP Ping в Qt Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
                              EVA
                              EVA25 декабря 2023 г. 21:30
                              Boost - статическая линковка в CMake проекте под Windows Ошибка LNK1104 часто возникает, когда компоновщик не может найти или открыть файл библиотеки. В вашем случае, это файл libboost_locale-vc142-mt-gd-x64-1_74.lib из библиотеки Boost для C+…
                              J
                              JonnyJo25 декабря 2023 г. 19:38
                              Boost - статическая линковка в CMake проекте под Windows Сделал всё по-как у вас, но выдаёт ошибку [build] LINK : fatal error LNK1104: не удается открыть файл "libboost_locale-vc142-mt-gd-x64-1_74.lib" Хоть убей, не могу понять в чём дел…
                              G
                              Gvozdik19 декабря 2023 г. 8:01
                              Qt/C++ - Урок 056. Подключение библиотеки Boost в Qt для компиляторов MinGW и MSVC Для решения твой проблемы добавь в файл .pro строчку "LIBS += -lws2_32" она решит проблему , лично мне помогло.
                              Сейчас обсуждают на форуме
                              G
                              Gar22 апреля 2024 г. 15:46
                              Clipboard Как скопировать окно целиком в clipb?
                              DA
                              Dr Gangil Academics20 апреля 2024 г. 17:45
                              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_vlasov14 апреля 2024 г. 16:41
                              Мобильное приложение на C++Qt и бэкенд к нему на Django Rest Framework Евгений, добрый день! Такой вопрос. Верно ли следующее утверждение: Любое Android-приложение, написанное на Java/Kotlin чисто теоретически (пусть и с большими трудностями) можно написать и на C+…
                              Павел Дорофеев
                              Павел Дорофеев14 апреля 2024 г. 12:35
                              QTableWidget с 2 заголовками Вот тут есть кастомный QTableView с многорядностью проект поддерживается, обращайтесь
                              f
                              fastrex4 апреля 2024 г. 14:47
                              Вернуть старое поведение QComboBox, не менять индекс при resetModel Добрый день! У нас много проектов в которых используется QComboBox, в версии 5.5.1, когда модель испускает сигнал resetModel, currentIndex не менялся. В версии 5.15 при resetModel происходит try…

                              Следите за нами в социальных сетях