Composants QML Qt

Outre les composants QML AppStudioqui vous permettent de concevoir l'interface utilisateur de votre application, vous avez également accès à tous les composants QML propres à The Qt Company. Cette rubrique décrit les composants les plus utiles. Pour obtenir la liste complète des types QML Qt, reportez-vous à la documentation Qt.

Voici la liste des types QML les plus utilisés :

• Positionneurs
• Ancres
• Mises en page
• Répéteurs
• États
• Connexions

Attention :

Il a été observé des différences d'affichage des éléments de l'interface utilisateur (UI) dans les échantillons et les applications AppStudio lors de la migration de Qt 5.13.1 vers Qt 5.15.2. Ces différences portent notamment sur la position, la taille, la mise en page, la couleur, le rognage, le renvoi à la ligne et la police. Vérifiez l'affichage de tous les éléments d'interface utilisateur de vos applications. Dans certains cas, il suffit de changer l'imbrication de vos composants ; dans d'autres, il faut définir des propriétés supplémentaires ou en moins. Du fait de la grande flexibilité du mode de définition des éléments de l'interface utilisateur dans QML, il n'y a aucune règle établie.

Dans la version 5.15.2, les types de propriété de Qt tels que bool, string et int, sont stricts et ne prennent plus en charge les valeurs nulles ou non définies. Si votre application utilise ces types, vous devez réfléchir à une façon de prendre en charge les valeurs nulles ou non définies. Une autre option consiste à utiliser le type de propriété var, qui accepte les valeurs nulles et non définies, mais également toutes les autres valeurs possibles.

Positionneurs

Les positionneurs sont des conteneurs qui gèrent les positions des éléments dans votre interface utilisateur. Les types de positionneur sont notamment la ligne, la colonne, la grille et le flux. L'organisation de vos éléments en fonction de ces types vous permet de les disposer dans une mise en page standard qui convient parfaitement aux interfaces utilisateur redimensionnables. Par exemple, si vous organisez vos éléments dans une grille, puis consultez votre application dans une orientation de type Portrait, une matrice d’éléments de 2 sur 5 peut s’afficher. Mais lorsque vous passez à l’orientation de type Paysage, votre grille d’éléments est automatiquement redisposée afin de mieux s’adapter à l’écran, ce qui donne une matrice d’éléments de 3 sur 4.

Pour plus d'informations sur les positionneurs, reportez-vous à la documentation Qt.

Ancres

On peut considérer que chaque élément comporte sept points d'ancrage et les autres éléments peuvent être positionnés par rapport à eux. Ces points correspondent au haut, au bas, à la gauche, à la droite, au centre horizontal, au centre vertical et à la ligne de base (la ligne sur laquelle le texte de l’élément se situe). Ceci est idéal pour positionner des éléments les uns par rapport aux autres et créer des interfaces utilisateur dynamiques. Les ancres demeurent même lorsque les dimensions ou les emplacements des éléments changent. Il est également possible de définir les marges des ancres, en spécifiant l'espace qui doit être laissé à l'extérieur de l'ancre d'un élément.

Pour plus d'informations sur les ancres, reportez-vous à la documentation Qt.

Mises en page

Pour utiliser les mises en page Qt Quick, vous devez référencer un module supplémentaire dans votre fichier QML, par exemple :

import QtQuick.Layouts 1.15

Les trois mises en page sont RowLayout, ColumnLayout et GridLayout. Par rapport aux lignes, colonnes et grilles, l’utilisation des mises en page permet de mieux contrôler le positionnement des éléments. Vous pouvez notamment spécifier l'alignement de chaque élément dans la mise en page. La mise en page GridLayout permet également de définir un espacement distinct entre les colonnes et les lignes, d’étendre les éléments sur les lignes et les colonnes et d’attribuer une cellule de grille individuelle à un élément. Les mises en page permettent également de définir les largeurs et hauteurs maximales et minimales préférées, et offrent la possibilité de remplir la largeur et la hauteur, pour chaque élément. Ceci est particulièrement utile lorsque vous concevez une application pour des affichages dynamiques ou multiples. Les mises en page peuvent également être mises en miroir, en transformant une mise en page de type gauche à droite en mise en page de type droite à gauche.

Répéteurs

Un objet répéteur crée des éléments à partir d’un modèle pour l’utiliser avec des positionneurs à l’aide des données d’un modèle. L’association des répéteurs et des positionneurs permet de mettre en page efficacement un grand nombre d’éléments. Un modèle peut être notamment :

• Nombre qui indique le nombre de délégués à créer par le répéteur
• Source de données de liste de forme libre : ListModel
• Liste de chaînes
• Liste d'objets

Le délégué fournit un modèle qui définit chaque élément instancié par le répéteur. Un délégué de répéteur peut accéder à son index dans le répéteur, ainsi qu’aux données de modèle appropriées au délégué.

Pour plus d’informations sur les répéteurs, reportez-vous à la documentation Qt.

États

Les états permettent d’afficher une vue ou un écran différent au sein d’une application. Ils peuvent servir à afficher ou à masquer des éléments en fonction de la valeur d’une propriété, à modifier l’ancrage ou à modifier des objets parent. Selon l'état, vous pouvez démarrer, arrêter ou interrompre des animations, ou exécuter des scripts. Chaque composant basé sur un élément possède une propriété d'état et un état par défaut. L'état par défaut est la chaîne vide ("") et contient toutes les valeurs de propriété initiales. Si vous définissez la propriété d’état sur une chaîne vide, l’état par défaut est chargé.

Pour plus d’informations sur les états, reportez-vous à la documentation Qt.

Connexions

Dans Qt 5.15, une nouvelle syntaxe est utilisée pour les connexions. La méthode précédente de création d'un gestionnaire on<Signal> est obsolète. C'est désormais la syntaxe de fonction qui doit être suivie. Voici le message d'avertissement que vous recevez si vous exécutez une application en utilisant l'ancienne syntaxe de connexion :

qrc:/qml/main.qml:277:5: QML Connections: Implicitly defined onFoo properties in Connections are deprecated. Use this syntax instead: function onFoo (<arguments>) { ... }

L’exemple suivant montre comment une connexion était généralement définie dans Qt 5.13 et versions précédentes :

Connections { 
     target: mouseArea 
     onPositionChanged: { 
         console.log( "onPositionChanged: ", mouse.x, mouse.y ); 
     } 
     onPressedChanged: { 
         console.log( "onPressedChanged: ", mouseArea.pressed ); 
     } 
}

L’exemple suivant montre comment une connexion doit être définie à partir de Qt 5.15 :

Connections { 
     target: mouseArea 
     function onPositionChanged(mouse) { 
         console.log( "onPositionChanged: ", mouse.x, mouse.y ); 
     } 
     function onPressedChanged() { 
         console.log( "onPressedChanged: ", mouseArea.pressed ); 
     } 
}

Maintenant que la syntaxe de fonction est utilisée, vous devez veiller à ce que tous les paramètres du signal soient explicitement répertoriés. Si vous en oubliez un, les paramètres du signal ne seront pas disponibles par nom, ce qui peut causer des références non définies dans votre code. Par exemple, vous devez utiliser function onPositionChanged(mouse) au lieu de onPositionChanged.

Lorsque vous établissez la liste des paramètres du signal, il est recommandé de répertorier tous les paramètres dans le bon ordre en utilisant leurs noms formels de paramètre de signal comme nom du paramètre dans la fonction. Par exemple, utilisez function onPositionChanged(mouse) et non function onPositionChanged(m).

SI le signal concerne la modification d'une propriété, vous devez nommer explicitement l'objet pour accéder à la propriété. Par exemple, vous devez utiliser mouseArea.pressed et non pressed.

Pour plus d’informations sur les connexions, reportez-vous à la documentation Qt.