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

Custom Button QML, QML, Custom


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.


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.


  • 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.


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[])

    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)
    }, Qt::QueuedConnection);

    return app.exec();


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


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.

We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.
- company blog
Support the author Donate


Only authorized users can post comments.
Please, Log in or Sign up

Hello, Dear Users of EVILEG!!!

If the site helped you, then support the development of the site financially, please.

You can do it by following ways:

Thank you, Evgenii Legotckoi

April 1, 2020, 8:03 a.m.
Dmitry Kozhinov

C++ - Test 001. The first program and data types

  • Result:40points,
  • Rating points-8
March 30, 2020, 12:47 p.m.

C++ - Test 001. The first program and data types

  • Result:60points,
  • Rating points-1
March 29, 2020, 12:14 p.m.

C++ - Тест 003. Условия и циклы

  • Result:71points,
  • Rating points1
Last comments
April 3, 2020, 8:06 a.m.
Konstantin Grudnitskiy

Я надеюсь вы уже разобрались в чем дело, но если вдруг нет, то проблема состоит в том, что вы пытаетесь запустить программу из интерпретатора питона. Файл main.py это уже готова…
April 3, 2020, 6:18 a.m.
Konstantin Grudnitskiy

>>> text = 'hello world'>>> ' '.join(word for word in text.split()[:-1])'hello'>>> def remove_last_word(text):... return text and ' '.join(word for word in text.s…
March 27, 2020, 2:40 p.m.
Evgenij Legotskoj

Добрый день. В конце пятой статьи скачать можете.
March 27, 2020, 2:28 p.m.
mkdir _

Здравствуйте, а можно, пожалуйста, ссылку на целые исходники, если есть?
March 27, 2020, 4:36 a.m.
Evgenij Legotskoj

Скорее всего также, как и для установки всех остальных переменых в CMake, через использование set
Now discuss on the forum
April 5, 2020, 5:09 a.m.

Попробуйте CQtDeployer или windeployqt.
April 5, 2020, 2:35 a.m.

Так работает console.log(textEmail.text) var str = textEmail.text; var n = str.search(/^((([0-9A-Za-z]{1}[-0-9A-z\.]{1,}[0-9A-Za-z]{1})|([0-9А-Яа-я]{1}[-0-9А-я\.]{1,}[…
April 3, 2020, 12:53 p.m.

Само собою на компе этого незаметно.
April 3, 2020, 8:48 a.m.

Евгений, добрый день. Спасибо!
April 3, 2020, 7:52 a.m.

да вроде много чего установленно, если неправильный путь указать то же самое, пробовал запустить видео через плей лист (по примерам из док)и из него назад путь взять, не получилось
© EVILEG 2015-2019
Recommend hosting TIMEWEB