Qt. QML Button. События, кастомизация, стили, примеры.

Рад снова всех приветствовать! Как известно, спрос рождает предложение, поэтому я решил опубликовать цикл статей, посвященных различным аспектам QML 👍 Пройдемся более менее масштабно, начиная с основных интерактивных элементов для взаимодействия с пользователем, таких как Button, CheckBox, ComboBox и т. д... И не оставим в стороне также более узконаправленные нюансы. При этом среди вопросов по этой тематике добрую половину представляют из себя вопросы по кастомизации стиля и внешнего вида элементов. Соответственно, этому уделим отдельное внимание, конечно же, все будет сопровождаться конкретными практическими примерами.

Не знал, с чего именно начать, но по факту последовательность тут особой роли не играет, так что без веской на то причины первым героем данного цикла будет тип Button. И в качестве отправной точки стабильно будем использовать пустой Qt Quick проект:

В итоге имеем проект с двумя файлами с дефолтным содержимым, main.cpp:

#include <QGuiApplication>
#include <QQmlApplicationEngine>



int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

И main.qml:

import QtQuick 2.15
import QtQuick.Window 2.15



Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
}

Для использования Button сразу импортируем:

import QtQuick.Controls 2.15

QML Button. Создание.

Итак, пустое приложение дает нам в результате запуска пустое же окно, и это прекрасно, ничего лишнего. Сегодня разбираем исключительно кнопку, поэтому создадим ее прямо в самом центре окна, сделав последнее чуть поменьше 👍:

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
        text: qsTr("testButton")
    }
}

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

QML Button. События.

Итак, кнопка создана для того, чтобы ее нажимали. Поэтому разберемся, как обработать данное действие пользователя. И все также максимально просто, при помощи обработчика - onClicked:

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

    Button {
        id: testButton
        anchors.centerIn: parent
        text: qsTr("testButton")

        onClicked: {
            console.log("testButton clicked");
        }
    }
}

Здесь мы по нажатию выводим строку в консоль. Пример настолько прост, что просто вгоняет в краску, поэтому минимально, но усложним. Добавим под кнопку текст, в который при нажатии будем выводить количество кликов по кнопке:

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

    Button {
        id: testButton
        anchors.centerIn: parent
        text: qsTr("testButton")

        property var clickCounter: 0

        onClicked: {
            clickCounter++;
            testButtonClicks.text = qsTr("testButton clicked: ") + clickCounter;
        }
    }

    Text {
        id: testButtonClicks
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: testButton.bottom
        anchors.topMargin: 10

        text: qsTr("No clicks")
    }
}

Button наследует от <