QML - Tutorial 037. Customizing Buttons in QML (Update Lesson 002)

Custom Button QML, Custom, QML

At the request of one of the users, I am updating one of the first lessons in accordance with the current status of Qt. Namely, a new lesson will be written using Qt Quick Controls 2.

Namely, we customize the appearance of our application so that the buttons look as follows.

Introduction

The first button will be red with a black rim and black text, and when pressed, it will change the background color to black with a red rim and red. And the second button will have the same colors, but in the opposite sequence.

Versioning

• Qt 5.13
• Qt Quick Controls 2

Project structure

I will not delve into the contents of the pro file, since it is created by default. But all the other files we will study.

main.cpp

I can say that the contents of the templates for the main.cpp file have undergone significant changes. And now the default file created is as follows.

#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

Now create and customize our buttons.

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
        }
    }
}
 

Conclusion

If you compare the previous article, you will see that the difference in code complexity is obvious. Personally, I consider it a good thing that now you do not need to redefine object styles for customization, as it was in Qt Quick Controls 1. It was an ugly and not flexible API for customization. And in some cases it was necessary to fix the private part of the code, which is also very bad. If you have to fix the private part of the code, then this says two things:

• or errors, which can be corrected by contributing to the library code, and this is normal
• or bad architecture, which is much worse

Also, this will be the first article, the code of which will be posted in a general special repository. I will try to put further articles in the repository on GitHub, that everything was in one place.