Meilleures pratiques en matière de QML et d'utilisation de l'Internet Qt Quick

Malgré tous les avantages qu'offrent QML et Qt Quick, ils peuvent représenter un défi dans certaines situations. Les sections suivantes détaillent certaines des meilleures pratiques qui vous aideront à obtenir de meilleurs résultats lors du développement d'applications.

Utiliser des contrôles intégrés plutôt que des contrôles d'interface utilisateur personnalisés

Une interface utilisateur fluide et moderne est la clé du succès de toute application dans le monde d'aujourd'hui, et c'est là que QML prend tout son sens pour un concepteur ou un développeur. Qt offre les contrôles d'interface utilisateur les plus basiques qui sont nécessaires pour créer une interface utilisateur fluide et moderne. Il est recommandé de parcourir cette liste de contrôles d'interface utilisateur avant de créer votre propre contrôle d'interface utilisateur personnalisé.

Outre ces contrôles d'interface utilisateur de base proposés par Qt Quick, un ensemble riche de contrôles d'interface utilisateur est également disponible sur Qt Quick Controls. Ils répondent aux cas d'utilisation les plus courants sans aucun changement, et offrent beaucoup plus de possibilités grâce à leurs options de personnalisation. En particulier, Qt Quick Controls fournit des options de style qui s'alignent sur les dernières tendances en matière de conception d'interface utilisateur. Si ces contrôles ne répondent pas aux besoins de votre application, il est recommandé de créer un contrôle personnalisé.

Vous pouvez utiliser les contrôles lorsque vous concevez des interfaces utilisateur dans Qt Design Studio. En outre, il fournit des animations basées sur la chronologie, des effets visuels, des mises en page et un aperçu en direct pour le prototypage d'applications.

Informations connexes

• Qt Quick Contrôles
• Personnalisation des contrôles Qt Quick
• Qt Quick
• Qt Design Studio Manuel

Conventions de codage

Voir les conventions de codage QML.

Regroupement des ressources de l'application

La plupart des applications dépendent de ressources, telles que des images et des icônes, pour offrir une expérience utilisateur riche. Il est souvent difficile de mettre ces ressources à la disposition de l'application, quel que soit le système d'exploitation cible. La plupart des systèmes d'exploitation courants appliquent des politiques de sécurité qui restreignent l'accès au système de fichiers, ce qui complique le chargement de ces ressources. Comme alternative, Qt offre son propre système de ressources qui est intégré dans le binaire de l'application, permettant l'accès aux ressources de l'application quel que soit le système d'exploitation cible.

Par exemple, pour un projet C++, considérez la structure de répertoire suivante :

MyModule
├── images
│   ├── image1.png
│   └── image2.png
├── CMakeLists.txt
└── main.qml

Vous pouvez représenter cette structure comme un module CMake QML de la manière suivante :

qt_add_qml_module(my_module
   URI MyModule
   VERSION 1.0
   QML_FILES
       main.qml
   RESOURCES
       images/image1.png
       images/image2.png
   # ...
)

Tous les fichiers QML répertoriés sous QML_FILES seront automatiquement compilés à l'avance.

Vous devez conserver les fichiers QML dans le même répertoire que le fichier CMakeLists.txt avec le module qt_add_qml_module. Sinon, leurs importations implicites seront différentes des modules QML auxquels ils appartiennent. C'est une source fréquente d'erreurs.

Informations connexes

• Le système de ressources Qt

Séparer l'interface utilisateur de la logique métier

L'un des principaux objectifs que la plupart des développeurs d'applications souhaitent atteindre est de créer une application facile à maintenir. L'un des moyens d'atteindre cet objectif est de séparer l'interface utilisateur, le frontend, de la logique métier, le backend. Voici quelques raisons pour lesquelles l'interface utilisateur d'une application devrait être écrite en QML :

• Les langages déclaratifs sont parfaitement adaptés à la définition des interfaces utilisateur.
• Le code QML est plus simple à écrire, car il est moins verbeux que le C++ et n'est pas fortement typé. Il s'agit donc d'un excellent langage de prototypage, une qualité essentielle lorsque l'on collabore avec des concepteurs, par exemple.
• JavaScript peut facilement être utilisé dans QML pour répondre aux événements.

Les langages fortement typés, tels que le C++, conviennent mieux à la logique commerciale d'une application, le backend. En général, ce code effectue des tâches telles que des calculs complexes ou le traitement de données, qui sont plus rapides dans les langages fortement typés que dans QML.

Qt propose différentes approches pour intégrer QML à un langage fortement typé dans une application. Un cas d'utilisation typique est l'affichage d'une liste de données dans une interface utilisateur. Si l'ensemble des données est statique, simple et de petite taille, un modèle écrit en QML peut suffire.

L'extrait suivant présente des exemples de modèles écrits en QML :

model: [ "Item 1", "Item 2", "Item 3" ]

model: 10

Pour les ensembles de données plus importants et plus dynamiques, il convient d'utiliser un langage fortement typé, tel que C++, pour gérer la logique commerciale.

Exposer des données de C++ à QML

Refondre QML est beaucoup plus facile que de refondre C++, donc afin de rendre la maintenance indolore, nous devrions nous efforcer de garder les types C++ ignorants de QML autant que possible. Cela peut être réalisé en "poussant" les références aux types C++ dans QML.

Cela peut se faire en utilisant les propriétés requises et en les définissant via QQmlApplicationEngine::setInitialProperties. Il est également possible de créer un ou plusieurs singletons qui renverront toutes les données que le côté C++ souhaite fournir à QML.

Avec cette approche, le C++ reste inchangé au cas où le QML devrait être remanié à l'avenir.

Pour un guide rapide sur le choix de la bonne approche pour exposer les types C++ à QML, voir Choisir la bonne méthode d'intégration entre C++ et QML.

Informations connexes

• Tutoriel sur l'écriture d'extensions QML avec C++
• Tutoriel sur l'application de chat

L'utilisation de Qt Design Studio

Qt Design Studio utilise des fichiers d'interface utilisateur portant l'extension .ui.qml pour séparer les parties visuelles de l'interface utilisateur de la logique d'interface utilisateur que vous mettez en œuvre dans les fichiers .qml. Vous ne devez modifier les fichiers d'interface utilisateur que dans la vue 2D de Qt Design Studio. Si vous utilisez un autre outil pour ajouter du code que Qt Design Studio ne prend pas en charge, des messages d'erreur s'affichent. Corrigez les erreurs pour permettre à nouveau l'édition visuelle des fichiers de l'interface utilisateur. En règle générale, vous devez déplacer le code non pris en charge vers un fichier .qml.

Informations connexes

• Qt Design Studio: Fichiers d'interface utilisateur

Utilisation de Qt Quick Views

Stocker l'état dans les modèles

Voir Avoid Storing State in Delegates.

Utilisation de Qt Quick Layouts

Qt propose Qt Quick Layouts pour organiser visuellement les éléments de Qt Quick dans une disposition. Contrairement à son alternative, les positionneurs d'éléments, la présentation Qt Quick peut également redimensionner ses enfants lors du redimensionnement de la fenêtre. Bien que les présentations Qt Quick soient souvent le choix idéal pour la plupart des cas d'utilisation, les choses à faire et à ne pas faire suivantes doivent être prises en compte lors de leur utilisation :

À faire

• Utilisez anchors ou les propriétés width et height pour spécifier la taille de la présentation par rapport à l'élément parent qui ne fait pas partie de la présentation.
• Utilisez la propriété Layout attached pour définir les attributs de taille et d'alignement des enfants immédiats du modèle.

À ne pas faire

• Ne pas définir de tailles préférentielles pour les éléments qui fournissent une largeur et une hauteur implicites, à moins que leurs tailles implicites ne soient pas satisfaisantes.
• N'utilisez pas d'ancres sur un élément qui est un enfant immédiat d'une disposition. Utilisez plutôt Layout.preferredWidth et Layout.preferredHeight:

  RowLayout {
      id: layout
      anchors.fill: parent
      spacing: 6
      Rectangle {
          color: 'orange'
          Layout.fillWidth: true
          Layout.minimumWidth: 50
          Layout.preferredWidth: 100
          Layout.maximumWidth: 300
          Layout.minimumHeight: 150
          Text {
              anchors.centerIn: parent
              text: parent.width + 'x' + parent.height
          }
      }
      Rectangle {
          color: 'plum'
          Layout.fillWidth: true
          Layout.minimumWidth: 100
          Layout.preferredWidth: 200
          Layout.preferredHeight: 100
          Text {
              anchors.centerIn: parent
              text: parent.width + 'x' + parent.height
          }
      }
  }

Informations connexes

• Positionneurs d'éléments
• Qt Quick Vue d'ensemble des mises en page

Sécurité des types

Lors de la déclaration de propriétés en QML, il est facile et pratique d'utiliser le type "var" :

property var name
property var size
property var optionsMenu

Cette approche présente toutefois plusieurs inconvénients :

• Si une valeur d'un type incorrect est attribuée, l'erreur signalée pointera vers l'emplacement de la déclaration de la propriété, et non vers l'emplacement auquel la propriété a été attribuée. Cela ralentit le processus de développement en rendant plus difficile la recherche des erreurs.
• Il n'est pas possible d'effectuer une analyse statique pour détecter des erreurs telles que celles mentionnées ci-dessus.
• Le type sous-jacent réel de la propriété n'est pas toujours immédiatement clair pour le lecteur.

Il convient donc de toujours utiliser le type réel lorsque cela est possible :

property string name
property int size
property MyMenu optionsMenu

Signaux de changement de propriété

Préférez utiliser les signaux d'interaction explicites plutôt que les signaux de changement de valeur afin d'éviter les bogues subtils.

L'utilisation de valueChanged peut conduire à des cascades d'événements où la valeur est constamment modifiée parce qu'elle est arrondie ou normalisée d'une manière ou d'une autre.

L'utilisation de signaux d'interaction explicites permet d'éviter toute cette catégorie de problèmes.

Par exemple, Slider a ces signaux similaires : moved et valueChanged.

Slider {
    value: someValueFromBackend

    onValueChanged: pushToBackend(value)
    // or
    onMoved: pushToBackend(value)
}

Les deux cas se ressemblent et vous voudrez peut-être utiliser valueChanged.

Les développeurs négligent souvent le fait que la valeur de Slider peut changer automatiquement, par exemple en raison de la fixation de valeurs minimales/maximales ou d'arrondis. Dans ce cas, le signal valueChanged est émis. Si vous utilisez le signal valueChanged, vous remarquerez peut-être qu'il est émis à des moments inattendus.

Pour éviter tout problème, utilisez un signal d'interaction : le signal qui est émis lorsque l'utilisateur interagit avec le contrôle. Dans cet exemple, si vous utilisez le signal moved, le slot ne sera déclenché que si l'utilisateur modifie le contrôle.

Performances

Pour plus d'informations sur les performances de QML et de Qt Quick, voir QML Performance Considerations and Suggestions (Considérations et suggestions sur les performances de QML).

Préférer les liaisons déclaratives aux affectations impératives

En QML, il est possible d'utiliser du code JavaScript impératif pour effectuer des tâches telles que répondre à des événements de saisie, envoyer des données sur un réseau, etc. Le code impératif a une place importante dans QML, mais il est également important de savoir quand ne pas l'utiliser.

Par exemple, considérons l'affectation impérative suivante :

Rectangle {
    Component.onCompleted: color = "red"
}

Elle présente les inconvénients suivants :

• Elle est lente. La propriété color sera d'abord évaluée avec une valeur construite par défaut, puis à nouveau avec "red" plus tard.
• Elle retarde les erreurs qui pourraient être détectées au moment de la construction jusqu'au moment de l'exécution, ce qui ralentit le processus de développement.
• Il écrase tout lien déclaratif en place. Dans la plupart des cas, cela est voulu, mais parfois cela peut être involontaire. Voir Debugging overwriting of bindings pour plus d'informations.
• Il interfère avec l'outillage ; Qt Quick Designer, par exemple, ne prend pas en charge JavaScript.

Le code peut être réécrit pour devenir une liaison déclarative :

Rectangle {
    color: "red"
}

Ne pas stocker l'état dans les délégués

Ne pas stocker un état dans un délégué. Le problème ici est que le délégué est créé et détruit plusieurs fois, de sorte que l'état sauvegardé sera perdu.

// Wrong approach:
ListView {
    // ...

    delegate: Button {
        // ...
        property bool someStateProperty
        onClicked: someStateProperty = true
    }
}

Stockez plutôt l'état en dehors du délégué. Par exemple, dans un modèle. Lorsque le délégué est détruit, l'état sauvegardé n'est pas perdu.

// Right approach:
ListView {
    // ...

    delegate: Button {
        // ...
        onClicked: model.someStateProperty = true
    }
}

Rendre traduisibles les chaînes de caractères destinées à l'utilisateur

Il est recommandé de rendre traduisibles les chaînes de caractères destinées à l'utilisateur dès le départ. Voir Écrire le code source pour la traduction.

ToolButton {
    id: selectionToolButton
    // ...
    icon.source: "qrc:/images/selection.png"

    Tooltip.Text: qsTr("Select pixels within an area and move them")

    onClicked: canvas.tool = ImageCanvas.SelectionTool
}

Ne pas personnaliser les styles natifs

Les styles natifs (styles Windows et macOS) ne prennent pas en charge la personnalisation. Veillez à ne pas personnaliser un style natif.

// Wrong approach:
import QtQuick.Controls.Windows

// Don't customize a native style
Button {
    background: Rectangle { /*...*/ }
}

Il est recommandé de toujours baser un contrôle personnalisé sur un style unique disponible sur toutes les plateformes, par exemple Basic Style, Fusion Style, Imagine Style, Material Style, Universal Style. Ce faisant, vous avez la garantie que le contrôle aura toujours la même apparence, quel que soit le style avec lequel l'application est exécutée. Pour savoir comment utiliser un style différent, voir Utilisation des styles dans les contrôles Qt Quick . Vous pouvez également créer votre propre style.

// Right approach:
import QtQuick.Controls.Basic

// You can customize a commonly available style
Button {
    background: Rectangle { /*...*/ }
}

Outils et utilitaires

Pour obtenir des informations sur les outils et les utilitaires utiles qui facilitent le travail avec QML et Qt Quick, voir Qt Quick Tools and Utilities (Outils et utilitaires).

Graphique de scène

Pour plus d'informations sur le graphique de scène de Qt Quick, voir Qt Quick Scene Graph.

Interfaces utilisateur évolutives

À mesure que les résolutions d'affichage s'améliorent, il devient de plus en plus important de disposer d'une interface utilisateur évolutive. L'une des approches pour y parvenir consiste à maintenir plusieurs copies de l'interface utilisateur pour différentes résolutions d'écran et à charger la copie appropriée en fonction de la résolution disponible. Bien que cette méthode fonctionne assez bien, elle augmente les coûts de maintenance.

Qt offre une meilleure solution à ce problème et recommande aux développeurs d'applications de suivre ces conseils :

• Utilisez des ancres ou le module Qt Quick Layouts pour disposer les éléments visuels.
• Ne pas spécifier de largeur et de hauteur explicites pour un élément visuel.
• Fournissez des ressources d'interface utilisateur telles que des images et des icônes pour chaque résolution d'affichage prise en charge par votre application. L'exemple de la galerie de contrôles Qt Quick le démontre bien en fournissant l'image qt-logo.png pour les résolutions @2x, @3x et @4x, ce qui permet à l'application de s'adapter aux écrans à haute résolution. Qt choisit automatiquement l'image appropriée pour l'affichage donné, à condition que la fonction de mise à l'échelle des DPI élevés soit explicitement activée.
• Utilisez des images SVG pour les petites icônes. Si les SVG de grande taille peuvent être lents à rendre, les SVG de petite taille fonctionnent bien. Les images vectorielles évitent de devoir fournir plusieurs versions d'une image, comme c'est le cas pour les images bitmap.
• Utilisez des icônes basées sur des polices, telles que Font Awesome. Elles s'adaptent à toutes les résolutions d'affichage et permettent également la colorisation. L'exemple de l'éditeur de texte de Qt Quick Controls le démontre bien.

Ainsi, l'interface utilisateur de votre application devrait s'adapter à la résolution d'affichage disponible.

Informations connexes

• Exemple de galerie
• Exemple d'éditeur de texte
• Font Awesome
• Évolutivité
• DPI élevé