Кнопки

Одним из ключевых элементов графического интерфейса являются кнопки. В 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
        }
    }
}

Для демонстрации здесь показаны все варианты сочетания текста/иконки: