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

                              C ++ - Test 004. Pointers, Arrays and Loops

                              • Result:50points,
                              • Rating points-4
                              m

                              C ++ - Test 004. Pointers, Arrays and Loops

                              • Result:80points,
                              • Rating points4
                              m

                              C ++ - Test 004. Pointers, Arrays and Loops

                              • Result:20points,
                              • Rating points-10
                              Last comments
                              i
                              innorwallNov. 11, 2024, 10:12 p.m.
                              Django - Tutorial 055. How to write auto populate field functionality Freckles because of several brand names retin a, atralin buy generic priligy
                              i
                              innorwallNov. 11, 2024, 6:23 p.m.
                              QML - Tutorial 035. Using enumerations in QML without C ++ priligy cvs 24 Together with antibiotics such as amphotericin B 10, griseofulvin 11 and streptomycin 12, chloramphenicol 9 is in the World Health Organisation s List of Essential Medici…
                              i
                              innorwallNov. 11, 2024, 3:50 p.m.
                              Qt/C++ - Lesson 052. Customization Qt Audio player in the style of AIMP It decreases stress, supports hormone balance, and regulates and increases blood flow to the reproductive organs buy priligy online safe Promising data were reported in a PDX model re…
                              i
                              innorwallNov. 11, 2024, 2:19 p.m.
                              Heap sorting algorithm The role of raloxifene in preventing breast cancer priligy precio
                              i
                              innorwallNov. 11, 2024, 1:55 p.m.
                              PyQt5 - Lesson 006. Work with QTableWidget buy priligy 60 mg 53 have been reported by Javanovic Santa et al
                              Now discuss on the forum
                              i
                              innorwallNov. 11, 2024, 8:56 p.m.
                              добавить qlineseries в функции buy priligy senior brother Chu He, whom he had known for many years
                              i
                              innorwallNov. 11, 2024, 10:55 a.m.
                              Всё ещё разбираюсь с кешем. 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
                              9AnonimOct. 25, 2024, 9:10 a.m.
                              Машина тьюринга // Начальное состояние 0 0, ,<,1 // Переход в состояние 1 при пустом символе 0,0,>,0 // Остаемся в состоянии 0, двигаясь вправо при встрече 0 0,1,>…

                              Follow us in social networks