Approches de mise en forme pour Qt Widgets

Qt Widgets propose trois façons de modifier l’apparence des widgets :

• Un « style » dessine chaque widget. Sous-classez QProxyStyle pour ajuster le style de la plateforme, ou QCommonStyle pour implémenter un aspect entièrement personnalisé. C’est le mécanisme utilisé par les styles propres à Qt, et celui à utiliser dans les applications de production.
• StyleKit décrit un design de manière déclarative en QML et l’applique aux widgets via QStyleKitStyle, une implémentation de QStyle. Le même fichier de style définit également le style de Qt Quick Controls.
• Les feuilles de style remplacent les propriétés visuelles individuelles par des règles de type CSS. Elles constituent un outil destiné au prototypage et aux petits ajustements locaux, et non à la mise en forme finale d’une application.

Cette page explique les implications de chaque approche et quand la choisir.

Choisissez une approche

Le tableau suivant met en correspondance un objectif de mise en forme avec le mécanisme qui y répond.

Implémentez un style pour les applications de production

Une sous-classe d’ QStyle dessine les widgets directement à l’aide de ` QPainter`, en utilisant les informations contenues dans la ` QStyleOption ` que chaque widget transmet au style. Un style dispose d’un contrôle total sur chaque élément, du biseau d’un bouton aux branches d’une arborescence, et il exerce ce contrôle au prix d’une simple opération de dessin : il n’y a pas de règles à faire correspondre ni d’état par widget à recalculer.

Choisissez la classe de base en fonction de l’ampleur des modifications que vous souhaitez apporter :

• QProxyStyle enveloppe un autre style, par défaut le style de la plateforme, et vous permet de redéfinir certaines fonctions telles que ` drawPrimitive()`, ` pixelMetric()` ou ` styleHint()`. Tout ce que vous ne redéfinissez pas conserve l’apparence et le comportement natifs. Utilisez-la pour ajuster le style de la plateforme.
• QCommonStyle implémente le comportement commun à tous les styles de Qt et vous laisse le soin de gérer le rendu. Utilisez-le comme base pour créer une apparence entièrement personnalisée. La section « Styles et widgets sensibles au style » passe en revue les éléments de style et montre comment chaque widget est dessiné.

Définissez le style une seule fois, avant que l’application ne crée ses fenêtres :

#include <QtWidgets>

#include "customstyle.h"

int main(int argc, char *argv[])
{
    QApplication::setStyle(new CustomStyle);
    QApplication app(argc, argv);
    QSpinBox spinBox;
    spinBox.show();
    return app.exec();
}

Utilisez les couleurs de la palette « QPalette » dans l’option de style plutôt que des couleurs codées en dur. Un même style produit alors une variante claire et une variante sombre du design à partir de deux palettes, sans changer de style. Le style «Fusion» de Qt fonctionne de cette manière.

Pour permettre aux utilisateurs de sélectionner le style depuis la ligne de commande à l’aide de l’option « -style », ou pour le partager entre applications, créez le style sous forme de plugin. Consultez « QStylePlugin » et «How to Create Qt Plugins».

Décrivez le design en QML avec StyleKit

StyleKit est un système de mise en forme déclaratif. Un style est un fichier QML dont l’objet racine est un ` Style`, qui définit les couleurs, les tailles, les rayons, les bordures et les variations en fonction de l’état pour chaque type de contrôle. Les propriétés se propagent à travers la hiérarchie des contrôles ; ainsi, une valeur définie une seule fois dans ` abstractButton ` s’applique à tous les types de boutons, et un style peut définir plusieurs thèmes nommés.

QStyleKitStyle est une implémentation de ` QStyle ` qui lit ce type de style et dessine les widgets à l’aide de ` QPainter`. ` Qt Quick ` ne participe pas au rendu. Le même fichier ` Style ` définit également le style de ` Qt Quick Controls`, ce qui permet à une application utilisant les deux boîtes à outils de conserver une seule définition de conception. Les thèmes définis dans le style sont sélectionnés à l’aide de ` setThemeName()`.

auto *style = new QStyleKitStyle(QStringLiteral(":/styles/MyStyle.qml"));
QApplication::setStyle(style);

QStyleKitStyle est disponible depuis Qt 6.12. StyleKit est un module Qt Labs, et son API est susceptible d’évoluer d’une version de Qt à l’autre. L’exemple « StyleKit Widgets » présente une application de widgets utilisant plusieurs styles et thèmes StyleKit.

Utilisez des feuilles de style pour le prototypage

Qt Widgets Les feuilles de style Qt modifient l’apparence des widgets grâce à des règles écrites dans une syntaxe de type CSS, sans avoir à écrire de code C++. Elles sont pratiques pour tester un design : modifiez un fichier .qss et redémarrez l’application, ou transmettez le fichier à l’aide de l’option de ligne de commande -stylesheet . Le Qt Widgets Designer permet de prévisualiser ces mêmes règles. Elles constituent également le moyen le plus rapide de mettre en évidence un widget unique, par exemple un champ obligatoire avec un fond jaune.

Les feuilles de style ont des coûts qui les rendent inadaptées comme mécanisme de mise en forme d’une application de production :

• Chaque widget concerné est dessiné via le moteur de feuille de style. Lorsqu’une feuille de style est définie, la méthode QWidget::style() renvoie un style de feuille de style qui encapsule l’ style sous-jacent. Pour chaque widget, elle fait correspondre les sélecteurs à la classe, au nom d’objet, aux propriétés et à l’état du widget, calcule les règles de rendu et les met en cache par widget. La consommation de mémoire et la charge de traitement augmentent avec le nombre de widgets et de règles.
• La modification d’une feuille de style réaffiche tout ce à quoi elle s’applique. Chaque appel à ` QApplication::setStyleSheet()` vide les caches et réaffiche tous les widgets de l’application, ce qui entraîne un nouveau calcul des polices, des palettes, de la géométrie et des indications de taille, et peut provoquer un scintillement visible. Ne basez pas le changement de thème sur des feuilles de style.
• Une règle partielle remplace l’apparence native. Lorsqu’une règle demande quelque chose que le style natif ne peut pas prendre en charge, comme une couleur d’arrière-plan pour un QPushButton, le moteur de feuille de style dessine lui-même l’élément dans son intégralité, sans la décoration native. Vous devez alors spécifier vous-même les bordures, le remplissage et chaque état, et un petit ajustement se transforme rapidement en une description complète de l’apparence. Voir Personnalisation d’ Qt Widgets s à l’aide de feuilles de style.
• Les sélecteurs lient la conception aux détails d’implémentation. Les règles correspondent à des noms de classes, des noms d’objets et des valeurs de propriétés. Renommer un objet ou remplacer une classe de widget empêche tacitement la règle de s’appliquer. Les règles n’affectent pas les widgets personnalisés qui s’affichent sans style.
• Les feuilles de style l’emportent sur les paramètres programmatiques. Une feuille de style remplace les polices, les palettes et les couleurs des éléments définies à l’aide de fonctions telles que ` QWidget::setFont()` ou ` QTreeWidgetItem::setBackground()`, de sorte que le style d’un widget n’est plus visible en un seul endroit.

Pour une comparaison côte à côte des feuilles de style et des sous-classes de ` QStyle `, consultez l’article de KDAB intitulé « Say No to Qt Style Sheets ».

Si vous utilisez tout de même des feuilles de style

Pour un prototype, ou pour les quelques ajustements locaux dont une application de production a besoin, veillez à ce que la feuille de style reste gérable :

• Conservez les règles dans un fichier ` .qss `, intégré au système de ressources Qt. Définissez-le une seule fois dans l’application à l’aide de ` QApplication::setStyleSheet()` avant l’affichage de la première fenêtre, puis laissez-le tel quel. Réservez ` QWidget::setStyleSheet()` aux ajustements qui concernent véritablement un seul widget et ses enfants.
• Ne construisez pas de feuilles de style à partir de chaînes de caractères C++. Une feuille de style définie sur un widget est analysée une fois pour chaque widget sur lequel elle est définie, et non une fois pour chaque chaîne de caractères ; de plus, chaque appel à ` QWidget::setStyleSheet()` actualise le widget et tous ses enfants, même si la chaîne n’a pas changé. Une chaîne de caractères construite avec QString::arg() pour refléter des données, comme une bordure rouge pour une valeur invalide, réaffiche le widget à chaque mise à jour. Exprimez plutôt la différence à l’aide d’un sélecteur sur un nom d’objet ou une propriété Qt dans une seule feuille de style, et réévaluez-la comme décrit dans la section « Personnalisation à l’aide de propriétés dynamiques ».
• Ne codez pas les couleurs en dur. Une couleur littérale telle que #ffffff ne convient qu’à un seul thème. Utilisez palette(window), palette(text) et les autres rôles de palette afin que la feuille de style suive la palette de l’application, y compris un schéma de couleurs sombres.
• Ne définissez pas toutes les dimensions en pixels. Une valeur de type « px » s’adapte à la taille de l’écran, mais pas à la police choisie par l’utilisateur. Utilisez les longueurs « em » et « ex » pour les remplissages, les marges et les dimensions qui doivent s’adapter à la police, et « pt » pour les tailles de police.

Passer d’une feuille de style à un style

Lorsqu’un prototype devient un produit, transférez la conception vers un style. La plupart des constructions de feuille de style ont un équivalent direct :