Custom Styling Qt Quick Controls - qt

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