View source for Qml Styling

{{Cleanup | reason=Auto-imported from ExpressionEngine.}}

'''English''' [[QmlStyling_Spanish|Spanish]] [[QmlStyling_Italian|Italian]] [[QmlStyling_Hungarian|Magyar]] [http://qt-devnet.developpez.com/tutoriels/qt-quick/qml/style/ French] [[QmlStyling_Bulgarian|Български]]

= 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 [http://doc.qt.io/qt-5/qtqml-referenceexamples-properties-example.html custom components]. 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.

<code>// TitleText.qml
Text {
 horizontalAlignment: Text.AlignHCenter
 font.pixelSize: 50
 color: "green"
}

// in use
TitleText {
 text: "Title 1"
}</code>

== 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.

<code>// Style.qml
pragma Singleton
import QtQuick 2.0
QtObject {
 property int textSize: 20
 property color textColor: "green"
}

// qmldir
singleton Style Style.qml

// in use
import QtQuick 2.0
import "." // QTBUG-34418, singletons require explicit import to load qmldir file

Text {
 font.pixelSize: Style.textSize
 color: Style.textColor
 text: "Hello World"
}</code>

== Approach 3: Hybrid (Style Singleton + Custom Component) ==

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

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

QtObject {
 property int titleAlignment: Text.AlignHCenter
 property int titleFontSize: 50
 property color titleColor: "green"
}

// TitleText.qml
import QtQuick 2.0
import "." // QTBUG-34418, singletons require explicit import to load qmldir file

Text {
 horizontalAlignment: Style.titleAlignment
 font.pixelSize: Style.titleFontSize
 color: Style.titleColor
}

// in use
TitleText {
 text: "Title 1"
}</code>

== Nesting QtObjects ==

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

<code>// Style.qml
.pragma Singleton

QtObject {

property QtObject window: QtObject{
 property color background: "white";
 }

property QtObject border: QtObject{
 property QtObject width: QtObject{
 property int normal: 1;
 property int big: 3;
 }

property QtObject color: QtObject{
 property color normal: "gray";
 property color focus: "blue";
 property color disabled: "red";
 }
 }
}</code>