QML et les styles

Le Qt Developer Network est un réseau de développeurs utilisant Qt afin de partager leur savoir sur ce framework. Vous pouvez le consulter en anglais.

Nokia, Qt, Qt Quarterly et leurs logos sont des marques déposées de Nokia Corporation en Finlande et/ou dans les autres pays. Les autres marques déposées sont détenues par leurs propriétaires respectifs.

Cet article est la traduction de Styling in QML.

Merci à ClaudeLELOUP pour sa relecture orthographique !

QML supporte la définition de nouveaux composants personnalisés. Ci-dessous, on crée un composant personnalisé TitleText à utiliser à chaque fois qu'un titre est requis. Si on veut changer l'apparence de tous les titres dans l'interface, il suffit d'éditer ce fichier et les changements s'appliqueront à chaque fois que ce composant est utilisé.

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

On l'utilise comme ceci :

TitleText {
    text: "Title 1"
}

Ici, on définit un objet Style qui contient une collection de propriétés définissant un style. Cet objet est instancié dans un composant racine, il est donc disponible dans toute l'application.

QtObject {
    property int textSize: 20
    property color textColor: "green"
}

On l'active dans l'objet racine :

Rectangle {
    ...
    Style { id: style }
    ...
}

On l'utilise comme ceci :

Text {
    font.pixelSize: style.textSize
    color: style.textColor
    text: "Hello World"
}

On peut aussi définir un objet de style global et l'utiliser dans des composants personnalisés.

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

On l'active dans l'objet racine :

Rectangle {
    ...
    Style { id: style }
    ...
}

On définit un composant personnalisé utilisant ce style :

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

On l'utilise comme ceci :

TitleText {
    text: "Title 1"
}