QML et les styles

| traducteur : Thibaut Cuvelier | Qt Developer Network |

QML fournit plusieurs mécanismes pour donner un style à une interface graphique. Voici trois approches communes.

Commentez !

- Titre : QML et les styles

- Auteurs : traducteur : Thibaut Cuvelier, Qt Developer Network

- Parution : 3 janvier 2011

- Mise à jour : 18 avril 2011

- Licence : Creative Commons Attribution-ShareAlike 2.5 Generic

Sommaire

- I. L'article original

- II. Les composants personnalisés

- III. Un objet de style

- IV. Une approche hybride

I - L'article original

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 !

II - Les composants personnalisés

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é.

TitleText.qml

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

On l'utilise comme ceci :

TitleText {
text: "Title 1"
}

III - Un objet de style

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.

Style.qml

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

On l'active dans l'objet racine :

Composant racine

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

On l'utilise comme ceci :

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

IV - Une approche hybride

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

Style.qml

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

On l'active dans l'objet racine :

Composant racine

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

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

TitleText.qml

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

On l'utilise comme ceci :

TitleText {
text: "Title 1"
}