Top.Mail.Ru

QML Button. Добавление иконки к кнопке.

Вдогонку к предыдущей статье, которая была посвящена работе с Button в QML, рассмотрим механизм добавления иконок для этих самых кнопок. И сперва подготовим необходимый файл, я возьму один из вариантов из проекта mtPaint3D. Так вот выглядят кнопки с иконками, утащим отмеченную для сегодняшних тестов:

Qt paint 3D.

И само изображение:

QML Button icon
  • размер - 200*200
  • формат - .png
  • фон прозрачный

В принципе, эти три пункта исчерпывают особенности изображения, так что возвращаемся к нашему пустому QML проекту с кнопкой посреди окна. На данном этапе финишировала предыдущая статья:

QML Button Gradient

Теперь:

  • сделаем кнопку квадратной
  • изменим цвета градиентов
  • уберем текст
  • добавим иконку

Начнем с первых трех пунктов, в main.qml в результате получаем:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15



Window {
    width: 320
    height: 240
    visible: true
    title: qsTr("QML Button Review")

    Button {
        id: testButton
        anchors.centerIn: parent

        background: Rectangle {
            Gradient {
                id: normalGradient

                GradientStop { position: 0.0; color: "#252525" }
                GradientStop { position: 0.5; color: "#00d793" }
                GradientStop { position: 1.0; color: "#252525" }
            }

            Gradient {
                id: hoveredGradient

                GradientStop { position: 0.0; color: "#252525" }
                GradientStop { position: 0.5; color: "#0cffb2" }
                GradientStop { position: 1.0; color: "#252525" }
            }

            Gradient {
                id: pressedGradient

                GradientStop { position: 0.0; color: "#252525" }
                GradientStop { position: 0.5; color: "#00875c" }
                GradientStop { position: 1.0; color: "#252525" }
            }

            implicitWidth: 100
            implicitHeight: 100
            gradient: testButton.pressed ? pressedGradient :
                      testButton.hovered ? hoveredGradient :
                                           normalGradient
            radius: 10
            border.width: 2.0
            border.color: "#000000"
        }
    }
}
Кастомизация кнопок в QML.

Здесь, соответственно, три состояния кнопки - обычное, при наведении курсора и при нажатии.

Дело за малым, осталось то, ради чего все и затевалось - добавить иконку. На всякий случай пройдем поэтапно процесс добавления нашего .png файла в проект:

  • Добавляем в проект файл ресурсов, пусть будет именоваться icons.qrc - Файл > Создать файл или проект (Ctrl + N):
Добавление файла ресурсов.
  • В папке с проектом добавляем подпапку для иконок, в которую кладем тот самый .png файл (test_icon.png):
Структура проекта.
  • В Qt Creator'е правой кнопкой на icons.qrc > Добавить существующие файлы и выбираем test_icon.png.
  • По итогу имеем:
QML Button icon.

Все, приготовления на этом завершены, для добавления иконки к Button есть специальное свойство, что неудивительно, называющееся icon. Им и воспользуемся:

icon.width: 100
icon.height: 100
icon.color: "transparent"
icon.source: "icons/test_icon.png"

Итоговый вид main.qml таким образом следующий:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15



Window {
    width: 320
    height: 240
    visible: true
    title: qsTr("QML Button Review")

    Button {
        id: testButton
        anchors.centerIn: parent

        icon.width: 100
        icon.height: 100
        icon.color: "transparent"
        icon.source: "icons/test_icon.png"

        background: Rectangle {
            Gradient {
                id: normalGradient

                GradientStop { position: 0.0; color: "#252525" }
                GradientStop { position: 0.5; color: "#00d793" }
                GradientStop { position: 1.0; color: "#252525" }
            }

            Gradient {
                id: hoveredGradient

                GradientStop { position: 0.0; color: "#252525" }
                GradientStop { position: 0.5; color: "#0cffb2" }
                GradientStop { position: 1.0; color: "#252525" }
            }

            Gradient {
                id: pressedGradient

                GradientStop { position: 0.0; color: "#252525" }
                GradientStop { position: 0.5; color: "#00875c" }
                GradientStop { position: 1.0; color: "#252525" }
            }

            implicitWidth: 100
            implicitHeight: 100
            gradient: testButton.pressed ? pressedGradient :
                      testButton.hovered ? hoveredGradient :
                                           normalGradient
            radius: 10
            border.width: 2.0
            border.color: "#000000"
        }
    }
}

Результат проделанных действий:

Пример Button icon в QML.

Вот на этой мажорной ноте и закачиваем обзор кастомизации Button в QML, до скорых встреч, следите за обновлениями )

Подписаться
Уведомление о
guest
0 комментариев
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x