Михаиллл
Михаиллл28 березня 2019 р. 03:59

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

QML, button

Добрый день.

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

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

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

Вам це подобається? Поділіться в соціальних мережах!

14
Evgenii Legotckoi
  • 28 березня 2019 р. 04:56

Добрый день.

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

ToolButton {
    text: qsTr("⋮")
    onClicked: { 
        // ToDo sometthing
    }
    icon.source: "qrc:/images/black.png"
}
    Михаиллл
    • 28 березня 2019 р. 09:00
    • (відредаговано)

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

    icon.source: "qrc:/images/images/black.png"
    
      Михаиллл
      • 28 березня 2019 р. 09: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 р. 04:50
                • (відредаговано)

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

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

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

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

                  Михаиллл
                  • 29 березня 2019 р. 06:41

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

                    Михаиллл
                    • 29 березня 2019 р. 06:46
                    • Відповідь була позначена як рішення.

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

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

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

                      Михаиллл
                      • 29 березня 2019 р. 06:55

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

                        Михаиллл
                        • 29 березня 2019 р. 07:12

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

                          Evgenii Legotckoi
                          • 29 березня 2019 р. 08:27

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

                            Михаиллл
                            • 29 березня 2019 р. 09:28

                            ясно

                              Коментарі

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

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

                              • Результат:90бали,
                              • Рейтинг балів8
                              МВ

                              Qt - Тест 001. Сигналы и слоты

                              • Результат:68бали,
                              • Рейтинг балів-1
                              ЛС

                              C++ - Тест 001. Первая программа и типы данных

                              • Результат:53бали,
                              • Рейтинг балів-4
                              Останні коментарі
                              A
                              ALO1ZE19 жовтня 2024 р. 08:19
                              Читалка файлів fb3 на Qt Creator Подскажите как это запустить? Я не шарю в программировании и кодинге. Скачал и установаил Qt, но куча ошибок выдается и не запустить. А очень надо fb3 переконвертировать в html
                              ИМ
                              Игорь Максимов05 жовтня 2024 р. 07:51
                              Django - Урок 064. Як написати розширення для Python Markdown Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку: <ul> <li></li> <li></l…
                              d
                              dblas505 липня 2024 р. 11:02
                              QML - Урок 016. База даних SQLite та робота з нею в QML Qt Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
                              k
                              kmssr08 лютого 2024 р. 18:43
                              Qt Linux - Урок 001. Автозапуск програми Qt під Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
                              АК
                              Анатолий Кононенко05 лютого 2024 р. 01:50
                              Qt WinAPI - Урок 007. Робота з ICMP Ping в Qt Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
                              Тепер обговоріть на форумі
                              J
                              JacobFib17 жовтня 2024 р. 03:27
                              добавить qlineseries в функции Пользователь может получить любые разъяснения по интересующим вопросам, касающимся обработки его персональных данных, обратившись к Оператору с помощью электронной почты https://topdecorpro.ru…
                              ИМ
                              Игорь Максимов03 жовтня 2024 р. 04:05
                              Реализация навигации по разделам Спасибо Евгений!
                              JW
                              Jhon Wick01 жовтня 2024 р. 15:52
                              Indian Food Restaurant In Columbus OH| Layla’s Kitchen Indian Restaurant If you're looking for a truly authentic https://www.laylaskitchenrestaurantohio.com/ , Layla’s Kitchen Indian Restaurant is your go-to destination. Located at 6152 Cleveland Ave, Colu…
                              КГ
                              Кирилл Гусарев27 вересня 2024 р. 09:09
                              Не запускается программа на Qt: точка входа в процедуру не найдена в библиотеке DLL Написал программу на C++ Qt в Qt Creator, сбилдил Release с помощью MinGW 64-bit, бинарнику напихал dll-ки с помощью windeployqt.exe. При попытке запуска моей сбилженной программы выдаёт три оши…
                              F
                              Fynjy22 липня 2024 р. 04:15
                              при создании qml проекта Kits есть но недоступны для выбора Поставил Qt Creator 11.0.2. Qt 6.4.3 При создании проекта Qml не могу выбрать Kits, они все недоступны, хотя настроены и при создании обычного Qt Widget приложения их можно выбрать. В чем может …

                              Слідкуйте за нами в соціальних мережах