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

Dec. 5, 2019, 8:01 a.m.
Sergej Bederin

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

  • Result:60points,
  • Rating points-1
Dec. 4, 2019, 6:39 a.m.
Artur Salmin

C++ - Test 005. Structures and Classes

  • Result:33points,
  • Rating points-10
Dec. 2, 2019, 4:05 p.m.
Sergej Timchenko

Qt - Test 001. Signals and slots

  • Result:68points,
  • Rating points-1
Last comments
Dec. 5, 2019, 4:15 p.m.
Evgenij Legotskoj

В этом слоте ваам нужно будет правильно смаппить координату. У QGraphicsView есть методы mapToScene, mapFromScene. Попробуйте использовать их.
Dec. 5, 2019, 8:30 a.m.
Leonid Pivovarov

А без переопределения qgraphicsScene это сделать возможно? Есть же коорината нажатия кнопки мыши slotCustomMenuRequested(QPoint)
Dec. 5, 2019, 8:11 a.m.

//qDebug()<<"position:"<<event->pos(); //qDebug()<<"position:"<<event->screenPos(); qDebug()<<"position:"<<event->scenePos();
Dec. 5, 2019, 8:09 a.m.
Leonid Pivovarov

Подскажите пожалуйста, К graphicsView я подключил обработку контекстного меню: сonnect(ui->graphicsView, SIGNAL(customContextMenuRequested(QPoint)), this, SLOT(slotCustomMenuRequest…
Dec. 4, 2019, 3:49 p.m.
Evgenij Legotskoj

resources_big - это флаг для сборки c++ приложения. Если Nuitka не предоставляет какой-либо функционал для прикручивания конфигурационных директив типа CONFIG при компиляции, то сомнева…
Now discuss on the forum
Dec. 5, 2019, 4:12 p.m.
Evgenij Legotskoj

Это уже кастомная стилизация. Придётся отключать обрамление и самостоятельно реализовывать ресайз окна, его перемещение, стиль и т.д. Вот статья, как отключить обрамление окна - QML …
Dec. 5, 2019, 4:27 a.m.

Вот код, вдруг, кому поможет. Код основной формы: import QtQuick 2.12import QtQuick.Controls 2.12import QtQuick.Layouts 1.3import "./Components/Panels" as PanelsApplicationWindow{…
Dec. 5, 2019, 2:50 a.m.
Evgenij Legotskoj

Создавайте новые темы, чтобы не было всё в куче.
Dec. 4, 2019, 10:07 p.m.

Спасибо за помощь! :) Я попытаю надежды в ожидании QtQuick3D от Riverbank'a. :)
Dec. 4, 2019, 7:02 a.m.

Со временем распаковки соласен - для слабых ноутов это проблема и именно Nuitka мог бы здесь помочь, если бы заработало. А QtlFW - это уже фреймфорк для создания инсталятора из имеющихся па…
© EVILEG 2015-2019
Recommend hosting TIMEWEB