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")

    // Create the first button
    Button {
        id: button_1 // Будем
        // Customize layout using anchors
        anchors.verticalCenter: parent.verticalCenter
        anchors.right: parent.horizontalCenter
        anchors.rightMargin: 15
        text: qsTr("Press me 1")

        // To customize the text, you need to set the Text object to contentItem
        contentItem: Text {
            text: button_1.text
            color: button_1.pressed ? "black" : "red"
        }

        // To customize the background, you must override the background property
        // namely, install some object that inherits from Item
        // For example Rectangle
        background: Rectangle {
            // The important point for dynamically setting the color is
            // that we control the pressed property of the button we are interested in
            // and depending on its state, set the color
            color: button_1.pressed ? "red" : "black"           // as background color
            border.color: button_1.pressed ? "black" : "red"    // so the borders
            border.width: 2
            radius: 5
        }
    }

    // Similarly, we customize the second button
    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 для кастомизации. А в некоторых случаях приходилось исправлять приватную часть кода, что тоже очень плохо. Если вам нужно исправить приватную часть кода, то это говорит о двух вещах:

• или ошибки, которые можно исправить внесением в код библиотеки, и это нормально
• или плохая архитектура, что гораздо хуже

Также это будет первая статья, код которой будет размещен в общем специальном репозитории. Дальнейшие статьи постараюсь выкладывать в репозиторий на GitHub, чтобы все было в одном месте.