Михаиллл
Михаиллл28. März 2019 03:59

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

QML, button

Добрый день.

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

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

Рекомендуємо хостинг TIMEWEB
Рекомендуємо хостинг TIMEWEB
Stabiles Hosting des sozialen Netzwerks EVILEG. Wir empfehlen VDS-Hosting für Django-Projekte.

Magst du es? In sozialen Netzwerken teilen!

14
Evgenii Legotckoi
  • 28. März 2019 04:56

Добрый день.

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

ToolButton {
    text: qsTr("⋮")
    onClicked: { 
        // ToDo sometthing
    }
    icon.source: "qrc:/images/black.png"
}
    Михаиллл
    • 28. März 2019 09:00
    • (bearbeitet)

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

    icon.source: "qrc:/images/images/black.png"
    
      Михаиллл
      • 28. März 2019 09:08

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

              Image {
                  id: name
                  source: "qrc:/images/images/black.png"
              }
      
        Михаиллл
        • 28. März 2019 11:11

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

          Evgenii Legotckoi
          • 28. März 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. März 2019 12:22

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

              Evgenii Legotckoi
              • 28. März 2019 12:27

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

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

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

                Михаиллл
                • 29. März 2019 04:50
                • (bearbeitet)

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

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

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

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

                  Михаиллл
                  • 29. März 2019 06:41

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

                    Михаиллл
                    • 29. März 2019 06:46
                    • Die Antwort wurde als Lösung markiert.

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

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

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

                      Михаиллл
                      • 29. März 2019 06:55

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

                        Михаиллл
                        • 29. März 2019 07:12

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

                          Evgenii Legotckoi
                          • 29. März 2019 08:27

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

                            Михаиллл
                            • 29. März 2019 09:28

                            ясно

                              Kommentare

                              Nur autorisierte Benutzer können Kommentare posten.
                              Bitte Anmelden oder Registrieren
                              Letzte Kommentare
                              A
                              ALO1ZE19. Oktober 2024 08:19
                              Fb3-Dateileser auf Qt Creator Подскажите как это запустить? Я не шарю в программировании и кодинге. Скачал и установаил Qt, но куча ошибок выдается и не запустить. А очень надо fb3 переконвертировать в html
                              ИМ
                              Игорь Максимов5. Oktober 2024 07:51
                              Django – Lektion 064. So schreiben Sie eine Python-Markdown-Erweiterung Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку: <ul> <li></li> <li></l…
                              d
                              dblas55. Juli 2024 11:02
                              QML - Lektion 016. SQLite-Datenbank und das Arbeiten damit in QML Qt Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
                              k
                              kmssr8. Februar 2024 18:43
                              Qt Linux - Lektion 001. Autorun Qt-Anwendung unter Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
                              Qt WinAPI - Lektion 007. Arbeiten mit ICMP-Ping in Qt Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
                              Jetzt im Forum diskutieren
                              J
                              JacobFib17. Oktober 2024 03:27
                              добавить qlineseries в функции Пользователь может получить любые разъяснения по интересующим вопросам, касающимся обработки его персональных данных, обратившись к Оператору с помощью электронной почты https://topdecorpro.ru…
                              JW
                              Jhon Wick1. Oktober 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. September 2024 09:09
                              Не запускается программа на Qt: точка входа в процедуру не найдена в библиотеке DLL Написал программу на C++ Qt в Qt Creator, сбилдил Release с помощью MinGW 64-bit, бинарнику напихал dll-ки с помощью windeployqt.exe. При попытке запуска моей сбилженной программы выдаёт три оши…
                              F
                              Fynjy22. Juli 2024 04:15
                              при создании qml проекта Kits есть но недоступны для выбора Поставил Qt Creator 11.0.2. Qt 6.4.3 При создании проекта Qml не могу выбрать Kits, они все недоступны, хотя настроены и при создании обычного Qt Widget приложения их можно выбрать. В чем может …

                              Folgen Sie uns in sozialen Netzwerken