Qt Quick Contrôles - Style plat

Flat Style montre comment intégrer des contrôles personnalisés dans Qt Quick Designer. L'exemple utilise un module QML pur pour définir des constantes dans un singleton. Pour les parties déclaratives de l'interface utilisateur, des fichiers .ui.qml sont utilisés. Ceux-ci peuvent être modifiés visuellement dans Qt Quick Designer.

Module QML pour la création de thèmes

L'exemple contient un module QML appelé Theme, qui consiste en un singleton QML portant le même nom. Pour que le module soit trouvé par QML, nous ajoutons le répertoire d'importation aux chemins d'importation du moteur dans main.cpp.

...
engine.addImportPath(":/imports");
...

Pour s'assurer que le modèle de code et Qt Quick Designer peuvent trouver le module, nous ajoutons la ligne suivante à flatstyle.pro.

QML_IMPORT_PATH = $$PWD/imports

Toutes les couleurs, les paramètres de police et les constantes de taille utilisés dans cet exemple sont définis en tant que propriétés dans le singleton appelé Theme.qml. Habituellement, les valeurs de ces attributs sont définies comme des constantes, car elles ne sont pas censées changer au moment de l'exécution. Dans cet exemple, nous permettons à l'utilisateur de modifier certains attributs tels que la couleur principale, le paramètre de taille et certains paramètres de police pendant l'exécution de l'application.

La définition des valeurs de ces attributs dans un singleton facilite leur maintenance et leur modification. Ce modèle facilite la mise en œuvre de la thématisation.

Module QML pour les contrôles personnalisés

Le module Flat contient un style pour quelques contrôles qui mettent en œuvre une apparence et une convivialité personnalisées. Ce style est défini comme le style de l'application dans qtquickcontrols2.conf.

L'exemple utilise les états d'un élément Qt Quick pour mettre en œuvre les différents états d'un contrôle. L'avantage est que nous pouvons définir l'aspect personnalisé dans Qt Quick Designer et que nous pouvons facilement vérifier les différents états d'un contrôle. Pour modifier l'indicateur d'un commutateur dans Qt Quick Designer, nous pouvons ouvrir Switch.qml et entrer l'implémentation de l'indicateur appelé switchHandle en utilisant la boîte combo en haut à côté de la boîte combo pour les documents ouverts.

L'application elle-même n'est qu'un simple formulaire qui permet à l'utilisateur d'ajuster quelques paramètres des contrôles personnalisés. L'utilisateur peut choisir une autre couleur principale, mettre la police en gras ou en souligné, et augmenter la taille des contrôles en actionnant un interrupteur.

MainForm.ui.qml est juste la définition déclarative pure du formulaire, tandis que flatstyle.qml instancie le formulaire et implémente la logique.

Exécution de l'exemple

Pour exécuter l'exemple à partir de Qt Creatorouvrez le mode Welcome et sélectionnez l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutoriel : Construire et exécuter.

Exemple de projet @ code.qt.io