Qml Styling

From Qt Wiki
Revision as of 16:36, 14 January 2015 by Maintenance script (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

English Spanish Italian Magyar French [qt-devnet.developpez.com] Български

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 [qt.io]. 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.

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.

Approach 3: Hybrid (Style Singleton + Custom Component)

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

Nesting QtObjects

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