Custom Styling Qt Quick Controls

Question

I would like to have a custom design for my Qt Quick Controls. For example, I would like to change background colour of a tool bar, since I hate the default design. How can I do that?

Answer 1

In Qt Quick Controls, there is limited styling available via Qt Quick Control Styles items, like ButtonStyle, CheckBoxStyle, etc.

At the moment, other styles require delving into Qt sources and messing with internal details.

Here is a complete example of how one might modify the toolbar's style.

main.qml

import QtQuick 2.1
import QtQuick.Layouts 1.0
import QtQuick.Controls 1.0

ApplicationWindow {
    toolBar: ToolBar {
        id: toolbar
        Component.onCompleted: toolbar.data[0].item.children = [newRectangle];
        property Item _newRectangle: Rectangle {
            // The rectangle within the ToolBarStyle's panel
            // Gleaned from:
            // http://qt.gitorious.org/qt/qtquickcontrols/source/
            //   c304d741a27b5822a35d1fb83f8f5e65719907ce:src/styles/Base/ToolBarStyle.qml
            id: newRectangle
            anchors.fill: parent
            gradient: Gradient{
                GradientStop{color: "#a00" ; position: 0}
                GradientStop{color: "#aaa" ; position: 1}
            }
            Rectangle {
                anchors.bottom: parent.bottom
                width: parent.width
                height: 1
                color: "#999"
            }
        }
        RowLayout {
            ToolButton { iconSource: "image://images/img1" }
            ToolButton { iconSource: "image://images/img2" }
        }
    }
}

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQuickWindow>
#include <QImage>
#include <QPainter>
#include <QQuickImageProvider>
#include <QDebug>

class ImageProvider : public QQuickImageProvider
{
public:
    ImageProvider() : QQuickImageProvider(QQuickImageProvider::Image) {}
    QImage requestImage(const QString &id, QSize *size, const QSize &requestedSize) {
        QImage img(32, 32, QImage::Format_ARGB32_Premultiplied);
        img.fill(0); // transparent
        QPainter p(&img);
        p.setRenderHint(QPainter::Antialiasing);
        p.translate(16, 16);
        p.scale(14, 14);
        p.setPen(QPen(Qt::black, 0.1));
        if (id == "img1") {
            p.drawEllipse(QPointF(0, 0), 1, 1);
        }
        else if (id == "img2") {
            p.drawLine(-1, -1, 1, 1);
            p.drawLine(-1, 1, 1, -1);
        }
        *size = img.size();
        return img;
    }
};

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);
    QQmlApplicationEngine engine;
    engine.addImageProvider("images", new ImageProvider);
    engine.load(QUrl("qrc:///main.qml"));
    QObject *topLevel = engine.rootObjects().value(0);
    QQuickWindow *window = qobject_cast<QQuickWindow *>(topLevel);
    window->show();
    return app.exec();
}

main.qrc

<RCC>
    <qresource prefix="/">
        <file>main.qml</file>
    </qresource>
</RCC>

Answer 2

I think the following lines are completely useless:

QObject *topLevel = engine.rootObjects().value(0);
QQuickWindow *window = qobject_cast<QQuickWindow *>(topLevel);
window->show();

You just need to do something like:

QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
return app.exec();