Одним из ключевых элементов графического интерфейса являются кнопки. В QML кнопка представлена типом Button из пакета
"QtQuick.Controls". Тип Button, в свою очередь, наследует функционал от типа AbstractButton
Класс Button и его родительский класс AbstractButton определяют не так много свойств, ключевое из которых - свойство text, которое задает текст кнопки:
import QtQuick import QtQuick.Controls Window { width: 250 height: 180 visible: true title: "METANIT.COM" Button { anchors.centerIn: parent width: 80 height: 30 text: "Click" } }
Но ключевой момент работы с кнопками - это, конечно, обработка нажатия, с помощью которого пользователь может посылать системе сигнал, выполнить определенное действие. Для этого класс Button определяет ряд свойств-обработчиков событий в зависимости от типа нажатия:
onClicked: обрабатывает нажатие
onDoubleClicked: обрабатывает двойное нажатие
onPressAndHold: обрабатывает нажатие с последующим удержанием кнопки в нажатом состоянии
onPressed: обрабатывает нажатие
onReleased: обрабатывает завершение нажатия, когда пользователь отпускает кнопку
onPressed: обрабатывает нажатие
Например, обработаем нажатие:
import QtQuick import QtQuick.Controls Window { width: 250 height: 180 visible: true title: "METANIT.COM" Button { anchors.centerIn: parent width: 80 height: 30 text: "Click" onClicked: { text = "Clicked" // изменяем текст кнопки } } }
Обработчик нажатия представляет функцию, тело которой определяется в фигурных скобках. В данном случае изменяем текст кнопки, присваивая ее свойству text
некоторую строку:
Тип Button предоставляет ряд возможностей по стилизации (в основном с помощью унаследованного функционала). Рассмотрим основные из них.
Прежде всего свойство font, которое представляет одноименный тип font
, позволяет настроить шрифт текста кнопки:
import QtQuick import QtQuick.Controls Window { width: 250 height: 180 visible: true title: "METANIT.COM" Button { anchors.centerIn: parent width: 100 height: 40 text: "Click" font.family: "Verdana"; // семейство шрифтов font.pixelSize: 15; // размер шрифта } }
Свойство background определяет элемент, который выступает в качестве фона. Данное свойство позволяет нам полностью переопределить визуализацию кнопки:
import QtQuick import QtQuick.Controls Window { width: 250 height: 180 visible: true title: "METANIT.COM" Button { anchors.centerIn: parent hoverEnabled: false // отключаем стилизацию наведения width: 100 height: 40 background: Rectangle{ // фон кнопки anchors.fill: parent color: "#c7ecee" // цвет фона кнопки border.color: "#01a3a4" // цвет границы radius: 5 Text{ text: "Click" // текст кнопки color: "#01a3a4" // цвет текста font.family: "Verdana"; // семейство шрифтов font.pixelSize: 18; // размер шрифта anchors.centerIn: parent } } } }
По умолчанию к кнопке применяется ряд эффектов. Например, при наведении и нажатии кнопка меняет цвет (по умолчанию на белый). В примере выше, чтобы не потерять стилизацию при наведении
в примере выше отключена поддержка наведения hoverEnabled: false
. Однако такой подход имеет недостаток - при нажатии мы не видим никакого визуального эффекта.
Соответственно, у пользователя могут возникнуть сомнения, а нажал ли он на кнопку. В этом случае мы можем установить условную стилизацию в зависимости от свойства down -
при нажатии кнопки это свойство равно true. Например:
import QtQuick import QtQuick.Controls Window { width: 250 height: 180 visible: true title: "METANIT.COM" Button { id: btn anchors.centerIn: parent hoverEnabled: false width: 100 height: 40 background: Rectangle{ // фон кнопки anchors.fill: parent color: btn.down ? "#01a3a4" : "#c7ecee" border.color: "#01a3a4" radius: 5 Text{ text: "Click" color: btn.down ? "#c7ecee":"#01a3a4" font.family: "Verdana"; font.pixelSize: 18; anchors.centerIn: parent } } } }
Здесь для кнопки установлен идентифкатор btn
, через который мы можем обращаться к кнопке в коде. В данном случае мы применяем этот идентификатор для проверки
свойства down
- если оно равно true
, устанавливаем один цвет, если false
- другой цвет:
color: btn.down ? "#01a3a4" : "#c7ecee"
Тип Button позволяет отображать на кнопке картинку или иконку. Для установки иконки тип Button предоставляет своство icon, которое в реальности представляет группу свойств:
icon.cache
: если равно true
(значение по умолчанию), то изображение кэшируется
icon.color
: цвет изображения
icon.height
: высота изображения
icon.name
: название изображения
icon.source
: путь к файлу изображения
icon.width
: ширина изображения
Кроме того, свойство display указывает, как будут отображаться текст кнопки и иконка. Для этого свойство может принимать одно из следующих значений:
Button.IconOnly
: отображается только иконка
Button.TextOnly
: отображается только текст
Button.TextBesideIcon
: текст отображается перед иконкой
Button.TextUnderIcon
: текст отображается под иконкой
Например, пусть в проекте есть папка icons, в которой находится одно изображение - "cpp.png":
Используем его в качестве иконки на кнопке:
import QtQuick import QtQuick.Controls Window { width: 250 height: 180 visible: true title: "METANIT.COM" Column{ anchors.fill: parent spacing: 5 padding: 5 Button { width: 100 height: 40 text: "Click" icon.source: "icons/cpp.png" icon.color: "transparent" display: Button.TextOnly } Button { width: 100 height: 40 text: "Click" icon.source: "icons/cpp.png" icon.color: "transparent" display: Button.IconOnly } Button { width: 100 height: 40 text: "Click" icon.source: "icons/cpp.png" icon.color: "transparent" display: Button.TextBesideIcon } Button { width: 100 height: 40 text: "Click" icon.source: "icons/cpp.png" icon.color: "transparent" display: Button.TextUnderIcon } } }
Для демонстрации здесь показаны все варианты сочетания текста/иконки: