QML - Урок 037. Кастомізація кнопок в QML (Оновлення уроку 002)

Custom Button QML, Custom, QML

На прохання одного з користувачів обновляю один з перших уроків відповідно до актуальним станом Qt. А саме, новий урок буде написаний з використанням Qt Quick Controls 2.

А саме, кастомізіруем зовнішній вигляд нашого застосування, щоб кнопки виглядали наступним чином.

Вступ

Перша кнопка буде червоного кольору з чорним обідком і чорним текстом, а при натисканні вона буде змінювати колір фону на чорний з червоним обідком і червоним кольором. А друга кнопка буде мати ті ж кольори, але в протилежному послідовності.

Версіонування

• Qt 5.13
• Qt Quick Controls 2

Структура проекту

Заглиблюватися в змісту файлу pro я не буду, оскільки він створюється за замовчуванням. А от всі інші файли ми вивчимо.

main.cpp

Можу сказати, що вміст шаблонів для файлу 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.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Custom Button")

    // Створюємо першу кнопку
    Button {
        id: button_1
        // Налаштовуємо верстку за допомогою якорів
        anchors.verticalCenter: parent.verticalCenter
        anchors.right: parent.horizontalCenter
        anchors.rightMargin: 15
        text: qsTr("Press me 1")

        // Для кастомізації тексту потрібно встановити об'єкт Text в contentItem
        contentItem: Text {
            text: button_1.text
            color: button_1.pressed ? "black" : "red"
        }

        // Для кастомізації фону необхідно перевизначити властивість background
        // а саме встановити в нього який-небудь об'єкт, який успадкований від Item
        // Наприклад Rectangle
        background: Rectangle {
            // Важливим моментом для динамічної установки кольору полягає в тому,
            // що ми контролюємо властивість pressed у цікавій для нас кнопки
            // і в залежності від його стану встановлюємо колір
            color: button_1.pressed ? "red" : "black"           // як колір фону
            border.color: button_1.pressed ? "black" : "red"    // так і кордони
            border.width: 2
            radius: 5
        }
    }

    // Аналогічно робимо кастомізацію другої кнопки
    Button {
        id: button_2
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.horizontalCenter
        anchors.leftMargin: 15
        text: qsTr("Press me 2")

        contentItem: Text {
            text: button_2.text
            color: button_2.pressed ? "red" : "black"
        }

        background: Rectangle {
            color: button_2.pressed ? "black" : "red"
            border.color: button_2.pressed ? "red" : "black"
            border.width: 2
            radius: 5
        }
    }
}

Висновок

Якщо ви порівняєте попередню статтю, то побачите, що різниця в складності коду очевидна. Особисто я вважаю хорошим явищем те, що тепер не потрібно для кастомізації перевизначати стилі об'єктів, як це було в Qt Quick Controls 1. Це було потворне і не гнучке API для кастомізації. А в деяких випадках доводилося виправляти private частина коду, що теж дуже погано. Якщо доводиться виправляти private частина коду, то це говорить про дві речі:

• або про помилки, що можна виправити за допомогою контрібьюціі в код бібліотеки, і це нормально
• Або про поганий архітектурі, що вже набагато гірше

Також, це буде перша стаття, код якої буде викладений в загальному спеціальному сховищі. Постараюся подальші статті також укладати в репозиторій на GitHub, що все було в одному місці.