Михаиллл
Михаиллл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

                            ясно

                              Комментарии

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

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

                              • Результат:50баллов,
                              • Очки рейтинга-4
                              m
                              • molni99
                              • 26 октября 2024 г. 6:37

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

                              • Результат:80баллов,
                              • Очки рейтинга4
                              m
                              • molni99
                              • 26 октября 2024 г. 6:29

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

                              • Результат:20баллов,
                              • Очки рейтинга-10
                              Последние комментарии
                              i
                              innorwall15 ноября 2024 г. 10:44
                              Qt/C++ - Урок 039. Как закрасить строку в QSqlTableModel по значению в столбце Many OPKs would advise users to start using the test strips around day 9 of your cycle, considering day 1 to be the first day of full menstrual flow buy priligy australia
                              i
                              innorwall15 ноября 2024 г. 7:27
                              Релиз утилиты развертывания С++/Qt и QML приложений CQtDeployer v1.4.0 (Binary Box) optionally substituted alkoxy, optionally substituted alkenyloxy, optionally substituted alkynyloxy, optionally substituted aryloxy, OCH, OC H, OC H, OC H, OC H, OC H, OC H, O C CH, OCH CH OH, O…
                              i
                              innorwall15 ноября 2024 г. 2:26
                              Qt/C++ - Урок 031. QCustomPlot - строим график по времени buy generic priligy We can just chat, and we will not lose too much time anyway
                              i
                              innorwall15 ноября 2024 г. 0:03
                              Qt/C++ - Урок 060. Настройка внешнего вида приложения в рантайме I didnt have an issue work colors priligy dapoxetine 60mg revia cost uk August 3, 2022 Reply
                              Сейчас обсуждают на форуме
                              t
                              tonypeachey115 ноября 2024 г. 11:04
                              google domain [url=https://google.com/]domain[/url] domain [http://www.example.com link title]
                              i
                              innorwall15 ноября 2024 г. 10:50
                              добавить qlineseries в функции priligy for sale Gently flush using an ear syringe
                              i
                              innorwall11 ноября 2024 г. 15:55
                              Всё ещё разбираюсь с кешем. priligy walgreens levitra dulcolax carbs The third ring was found to be made up of ultra relativistic electrons, which are also present in both the outer and inner rings
                              9
                              9Anonim25 октября 2024 г. 14:10
                              Машина тьюринга // Начальное состояние 0 0, ,<,1 // Переход в состояние 1 при пустом символе 0,0,>,0 // Остаемся в состоянии 0, двигаясь вправо при встрече 0 0,1,>…

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