Qml Styling

English Spanish Italian Magyar "French":http://qt-devnet.developpez.com/tutoriels/qt-quick/qml/style/ Български
[toc align_right="yes" depth="3"]

Styling in QML

QML provides several mechanisms for styling a UI. Below are three common approaches.

Approach 1: Custom Component

QML supports defining your own "custom components":http://doc.qt.io/qt-5/qtqml-referenceexamples-properties-example.html. Below, we create a custom component TitleText that we can use whenever our UI requires a title. If we want to change the appearance of all the titles in our UI, we can then just edit TitleText.qml, and the changes will apply wherever it is used.

// TitleText.qml<br />Text {<br /> horizontalAlignment: Text.AlignHCenter<br /> font.pixelSize: 50<br /> color: &quot;green&amp;quot;<br />}

// in use<br />TitleText {<br /> text: &quot;Title 1&amp;quot;<br />}

Approach 2: Style Singleton

In this approach we define a Style QML singleton object that contains a collection of properties defining the style. As a QML singleton, a common instance can be access from anywhere which imports this directory. Note that QML singletons require a qmldir file with the singleton keyword preceding the Style type declaration; they cannot be picked up implicitly like other types.

// Style.qml<br />pragma Singleton<br />import QtQuick 2.0<br />QtObject {<br /> property int textSize: 20<br /> property color textColor: &quot;green&amp;quot;<br />}

// qmldir<br />singleton Style Style.qml

// in use<br />import QtQuick 2.0<br />import &quot;.&quot; // QTBUG-34418, singletons require explicit import to load qmldir file

Text {<br /> font.pixelSize: Style.textSize<br /> color: Style.textColor<br /> text: &quot;Hello World&amp;quot;<br />}

Approach 3: Hybrid (Style Singleton + Custom Component)

In this approach, we have a Style singleton that is used by our custom component.

// Style.qml<br />import QtQuick 2.0<br />pragma Singleton

QtObject {<br /> property int titleAlignment: Text.AlignHCenter<br /> property int titleFontSize: 50<br /> property color titleColor: &quot;green&amp;quot;<br />}

// TitleText.qml<br />import QtQuick 2.0<br />import &quot;.&quot; // QTBUG-34418, singletons require explicit import to load qmldir file

Text {<br /> horizontalAlignment: Style.titleAlignment<br /> font.pixelSize: Style.titleFontSize<br /> color: Style.titleColor<br />}

// in use<br />TitleText {<br /> text: &quot;Title 1&amp;quot;<br />}

Nesting QtObjects

If you need to nest QtObject to access more defined properties (i.e. border.width.normal) you can do the following:

// Style.qml<br />.pragma Singleton

QtObject {

property QtObject window: QtObject{<br /> property color background: &quot;white&amp;quot;;<br /> }

property QtObject border: QtObject{<br /> property QtObject width: QtObject{<br /> property int normal: 1;<br /> property int big: 3;<br /> }

property QtObject color: QtObject{<br /> property color normal: &quot;gray&amp;quot;;<br /> property color focus: &quot;blue&amp;quot;;<br /> property color disabled: &quot;red&amp;quot;;<br /> }<br /> }<br />}