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

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

QML, button

Добрый день.

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

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

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

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

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

Добрый день.

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

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

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

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

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

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

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

          Evgenii Legotckoi
          • 28 марта 2019 г. 21: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 г. 22:22

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

                            ясно

                              Комментарии

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

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

                              • Результат:84баллов,
                              • Очки рейтинга4
                              Ua

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

                              • Результат:42баллов,
                              • Очки рейтинга-8
                              ОК

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

                              • Результат:47баллов,
                              • Очки рейтинга-6
                              Последние комментарии
                              ИМ
                              Игорь Максимов22 ноября 2024 г. 21:51
                              Django - Урок 017. Кастомизированная страница авторизации на Django Добрый вечер Евгений! Я сделал себе авторизацию аналогичную вашей, все работает, кроме возврата к предидущей странице. Редеректит всегда на главную, хотя в логах сервера вижу запросы на правильн…
                              Evgenii Legotckoi
                              Evgenii Legotckoi31 октября 2024 г. 23:37
                              Django - Урок 064. Как написать расширение для Python Markdown Добрый день. Да, можно. Либо через такие же плагины, либо с постобработкой через python библиотеку Beautiful Soup
                              A
                              ALO1ZE19 октября 2024 г. 17:19
                              Читалка fb3-файлов на Qt Creator Подскажите как это запустить? Я не шарю в программировании и кодинге. Скачал и установаил Qt, но куча ошибок выдается и не запустить. А очень надо fb3 переконвертировать в html
                              ИМ
                              Игорь Максимов5 октября 2024 г. 16:51
                              Django - Урок 064. Как написать расширение для Python Markdown Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку: <ul> <li></li> <li></l…
                              d
                              dblas55 июля 2024 г. 20:02
                              QML - Урок 016. База данных SQLite и работа с ней в QML Qt Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
                              Сейчас обсуждают на форуме
                              f
                              firstlunoxod15 февраля 2025 г. 13:46
                              Рисование на QGraphicsScene при зажатой кнопке мыши Подскажите, пожалуйста! Как данный класс можно дополнить, чтобы созданные объекты можно было перемещать мышкой по сцене?
                              Дмитрий
                              Дмитрий3 февраля 2025 г. 16:24
                              Создание deb-пакета. Как создать ярлык на рабочем столе после установки собственного deb-пакета? Всем привет. Сделал свой deb-пакет с программой. Всё устанавливается и работает. Ставлю по пути /usr/bin/my_application. Как для пользователя при установке пакета сразу создать ярлык на раб…
                              NW
                              Nayo Wai30 января 2025 г. 19:22
                              не запускается компьютер!!! Не запускается компьютер (точнее работает блок , но сам монитор вообще жесть)В общем я ничего с интернета не скачивала в последнее время. На компе никаких левых пр…
                              n
                              nkly3 января 2025 г. 12:52
                              Нужно запретить перемещение только некоторых итемов, остальные перемещать можно. Вопрос решен. Узнать QModelIndex элемента на который мы перетаскиваем другой элемент, можно с помощью функции indexAt(event->position().toPoint()) представления QTreeViev вызываемой в переопр…
                              M
                              Marsel17 августа 2023 г. 0:26
                              OAuth2.0 через VK, получение email Спасибо большое за помощь и простите за то что отнял время своей невнимательностью.

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