Qml Styling
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: