Qml Styling

From Qt Wiki
Jump to: navigation, search

En Ar Bg De El Es Fa Fi Fr Hi Hu It Ja Kn Ko Ms Nl Pl Pt Ru Sq Th Tr Uk Zh

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

Approach 1: Custom Component

QML supports defining your own 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.

// TitleText.qml Text {

horizontalAlignment: Text.AlignHCenter
font.pixelSize: 50
color: "green"

}

// in use TitleText {

text: "Title 1"

}

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. When using Qrc resources both the Style.qml and the qmldir file must be included in the .qrc resource file.

// Style.qml pragma Singleton import QtQuick 2.0 QtObject {

property int textSize: 20
property color textColor: "green"

}

// qmldir singleton Style 1.0 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"

}

Approach 3: Hybrid (Style Singleton + Custom Component)

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

// 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"

}

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 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";
}
}

}