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 9, 2020, 5:41 a.m.

Qt - Test 001. Signals and slots

  • Result:21points,
  • Rating points-10
April 9, 2020, 5:36 a.m.

C ++ - Test 004. Pointers, Arrays and Loops

  • Result:40points,
  • Rating points-8
April 9, 2020, 5:32 a.m.

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

  • Result:53points,
  • Rating points-4
Last comments
April 8, 2020, 9:12 a.m.

Круто! Немного начинает проясняться что к чему. Спасибо.
April 7, 2020, 8:55 a.m.

А вот уже и на python... #!/usr/bin/env python# -'''- coding: utf-8 -'''-import sysfrom PySide2.QtWidgets import *from PySide2.QtQuick import *from PySide2.QtCore import *from PySide2.…
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

Добрый день. В конце пятой статьи скачать можете.
Now discuss on the forum
April 9, 2020, 3:31 a.m.
Dzhon Kofi

Привет. Делаю реализацию перемещения строк на QTableView с моделью QSqlTableModel. Буду в этой теме спрашивать нужное. Пока такой вопрос при создании модели: как мне узнать rowCount? int…
April 8, 2020, 5:42 p.m.

Подскажите как правильно реализовать... Нужно создать массив в C++ с переменными типа сhar или же int. В Qml будет переменная, например text, которая будет изменять своё значение в зависим…
April 8, 2020, 6:29 a.m.
Dzhon Kofi

:-D блин, без слов, пойду пройдусь))
April 8, 2020, 4:59 a.m.

Всем привет. Прошу помощи.есть статическая сборка 5.14.2 (без SSL) компилируется чистый шаблон на QML и Widgets если войти на компьютер в терминальной сессии и запустить программ…
April 6, 2020, 8:06 a.m.

Добрый день. Объясните пожалуйста ... ... допиливать стилевое оформление в прокси классе ... где именно копать ? В каком виртуальном методе лучше допиливать (если можно н…
© EVILEG 2015-2019
Recommend hosting TIMEWEB