CODEWITHSUNDEEP
qtqml
khajvah
khajvah

Reputation: 5090

Custom Styling Qt Quick Controls

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?

Upvotes: 7

Views: 5401

Answers (2)

schoenix
schoenix

Reputation: 61

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();

Upvotes: 1

Kuba hasn&#39;t forgotten Monica
Kuba hasn&#39;t forgotten Monica

Reputation: 98525

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.

screenshot

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>

Upvotes: 6

Related Questions