Qt Quick Controls - Style « Flat »

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

Module QML pour la personnalisation

L’exemple contient un module QML nommé Theme, qui se compose d’un singleton QML du même nom. Pour garantir que le module soit détecté par QML, nous ajoutons le répertoire d’importation aux chemins d’importation du moteur dans main.cpp.

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

Pour que le modèle de code et le concepteur Qt Quick puissent trouver le module, nous ajoutons la ligne suivante dans flatstyle.pro.

QML_IMPORT_PATH = $$PWD/imports

Toutes les couleurs, tous les paramètres de police et toutes les constantes de taille utilisés dans cet exemple sont définis comme des propriétés dans le singleton nommé Theme.qml. En général, ces valeurs d’attributs sont définies comme des constantes, car elles ne sont pas censées changer lors 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.

Définir ces valeurs d’attributs dans un singleton facilite leur maintenance et leur modification. Ce modèle simplifie la mise en œuvre de la personnalisation des thèmes.

Module QML pour les contrôles personnalisés

Le module Flat contient un style pour plusieurs contrôles qui implémentent une apparence personnalisée. Ce style est défini comme style de l’application dans qtquickcontrols2.conf.

L’exemple utilise les états d’un élément Qt Quick pour implémenter les différents états d’un contrôle. Cela présente l’avantage de pouvoir définir l’apparence personnalisée dans Qt Quick Designer et de vérifier facilement les différents états d’un contrôle. Pour modifier l’indicateur d’un commutateur dans le Designer d’ Qt Quick, on peut ouvrir le fichier Switch.qml, puis saisir l’implémentation de l’indicateur nommé « switchHandle » à l’aide de la liste déroulante située en haut, à côté de celle des documents ouverts.

L’application elle-même n’est qu’un simple formulaire permettant à l’utilisateur de régler quelques paramètres des contrôles personnalisés. L’utilisateur peut choisir une autre couleur principale, mettre la police en gras ou la souligner, et augmenter la taille des contrôles en basculant un commutateur.

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

Exécution de l’exemple

Vous pouvez exécuter l’exemple à partir de :

• Qt Creator

  Ouvrez le mode « Welcome » et sélectionnez l’exemple dans « Examples ». Pour plus d’informations, consultez Qt Creator: Tutoriel : Compiler et exécuter.

• Qt Extension for Visual Studio Code

  Exécutez la commande « Qt: Open Qt examples » à partir de Command Palette, puis sélectionnez l’exemple dans la liste. Pour plus d’informations, consultez Qt Extension for Visual Studio Code: Tutoriel : Compiler et exécuter.

Exemple de projet sur code.qt.io