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 [doc.qt.nokia.com]. 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.

  1. // TitleText.qml
  2. Text {
  3.     horizontalAlignment: Text.AlignHCenter
  4.     font.pixelSize: 50
  5.     color: "green"
  6. }
  7.  
  8. // in use
  9. TitleText {
  10.     text: "Title 1"
  11. }

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.

  1. // Style.qml
  2. pragma Singleton
  3. import QtQuick 2.0
  4. QtObject {
  5.     property int textSize: 20
  6.     property color textColor: "green"
  7. }
  8.  
  9. // qmldir
  10. singleton Style Style.qml
  11.  
  12. // in use
  13. import QtQuick 2.0
  14. import "."  // QTBUG-34418, singletons require explicit import to load qmldir file
  15.  
  16. Text {
  17.     font.pixelSize: Style.textSize
  18.     color: Style.textColor
  19.     text: "Hello World"
  20. }

Approach 3: Hybrid (Style Singleton + Custom Component)

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

  1. // Style.qml
  2. import QtQuick 2.0
  3. pragma Singleton
  4.  
  5. QtObject {
  6.     property int titleAlignment: Text.AlignHCenter
  7.     property int titleFontSize: 50
  8.     property color titleColor: "green"
  9. }
  10.  
  11. // TitleText.qml
  12. import QtQuick 2.0
  13. import "."  // QTBUG-34418, singletons require explicit import to load qmldir file
  14.  
  15. Text {
  16.     horizontalAlignment: Style.titleAlignment
  17.     font.pixelSize: Style.titleFontSize
  18.     color: Style.titleColor
  19. }
  20.  
  21. // in use
  22. TitleText {
  23.     text: "Title 1"
  24. }

Nesting QtObjects

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

  1. // Style.qml
  2. .pragma Singleton
  3.  
  4. QtObject {
  5.  
  6.     property QtObject window: QtObject{
  7.         property color background: "white";
  8.     }
  9.  
  10.     property QtObject border: QtObject{
  11.         property QtObject width: QtObject{
  12.             property int normal: 1;
  13.             property int big: 3;
  14.         }
  15.  
  16.         property QtObject color: QtObject{
  17.             property color normal: "gray";
  18.             property color focus: "blue";
  19.             property color disabled: "red";
  20.         }
  21.     }
  22. }

Categories: