Les états QML

Aperçu

Les interfaces utilisateur sont conçues pour présenter différentes configurations d'interface dans différents scénarios ou pour modifier leur apparence en réponse à une interaction utilisateur. Souvent, un ensemble de changements est effectué simultanément, tel que l'interface puisse être vue comme changeant en interne d'un état à un autre.

Cela s'applique généralement aux éléments de l'interface, quelle que soit leur complexité. Une visionneuse de photos peut initialement présenter des images dans une grille et, quand l'on clique sur une image, passer à un état « détaillé » où l'image seule est élargie et l'interface changée pour présenter de nouvelles options pour une édition d'image. Inversement, lorsqu'un simple bouton est enfoncé, il peut passer à un état « enfoncé » dans lequel sa couleur et sa position sont modifiées pour donner une apparence enfoncée.

Dans QML, tout objet peut transiter entre différents états pour appliquer des ensembles de changements qui modifient les propriétés des éléments concernés. Chaque état peut présenter une configuration différente qui peut, par exemple :

• afficher des éléments d'IU et en cacher d'autres ;
• présenter différentes actions disponibles à l'utilisateur ;
• lancer, arrêter ou mettre en pause des animations ;
• exécuter des scripts requis dans le nouvel état ;
• changer une valeur de propriété pour un élément particulier ;
• afficher une vue ou « écran » différent.

Les changements entre les états peuvent être animés par le biais des transitions, comme présenté plus loin.

Tous les objets basés sur Item ont un default state (état par défaut) et peuvent spécifier des états additionnels en ajoutant de nouveaux objets State à la propriété states de l'élément. Chaque état a un name (nom) qui est unique pour tous les états présents dans cet élément ; le nom d'état par défaut est une chaîne vide. Pour changer l'état actuel d'un élément, affectez le nom de l'état à la propriété state.

Les objets non basés sur Item peuvent utiliser les états par le biais de l'élément StateGroup.

Création d'états

Pour créer un état, ajoutez un objet State à la propriété states de l'élément, qui contient une liste des états pour cet élément.

Dans l'exemple qui suit, un Rectangle est initialement placé à la position par défaut (0, 0). Il a un état additionnel défini, nommé « moved », dans lequel un objet PropertyChanges repositionne le rectangle à (50, 50). Le fait de cliquer à l'intérieur de la MouseArea change l'état à « moved », déplaçant par conséquent le Rectangle.

 import QtQuick 1.0
 
 Rectangle {
     id: myRect
     width: 200; height: 200
     color: "red"
 
     MouseArea {
         anchors.fill: parent
         onClicked: myRect.state = 'moved'
     }
 
     states: [
         State {
             name: "moved"
             PropertyChanges { target: myRect; x: 50; y: 50 }
         }
     ]
 }

L'élément State définit tous les changements à effectuer dans le nouvel état. Il peut spécifier les propriétés additionnelles à changer ou créer des PropertyChanges additionnels pour d'autres objets. Il peut aussi modifier les propriétés d'autres objets, pas uniquement celles de l'objet qui possède l'état. Par exemple :

 Rectangle {
     ...
     states: [
         State {
             name: "moved"
             PropertyChanges { target: myRect; x: 50; y: 50; color: "blue" }
             PropertyChanges { target: someOtherItem; width: 1000 }
         }
     ]
 }

Par commodité, si un élément n'a qu'un seul état, sa propriété states peut être définie en tant qu›état unique, sans la syntaxe de liste avec crochets :

 Item {
     ...
     states: State {
         ...
     }
 }

Un état n'est pas limité au fait d'effectuer des modifications sur les valeurs des propriétés. Il peut également :

• lancer des scripts en utilisant StateChangeScript ;
• redéfinir un gestionnaire de signal existant pour un objet en utilisant PropertyChanges ;
• changer le parent d'un élément avec ParentChanges ;
• modifier les valeurs d'ancrage en utilisant AnchorChanges.

L'exemple d'états et de transitions montre comment déclarer un ensemble basique d'états et appliquer des transitions animées entre eux.

L'état par défaut

Bien sûr, le Rectangle dans l'exemple ci-dessus aurait pu avoir été déplacé simplement en définissant sa position à (50, 50) dans le gestionnaire onClicked de la zone de souris. Cependant, mises à part les possibilités de changement de lots de propriétés, une des caractéristiques des états QML est la capacité d'un élément à retourner à son état par défaut. L'état par défaut contient la totalité des valeurs initiales des propriétés d'un élément avant qu'elles ne soient modifiées dans un changement d'état.

Par exemple, supposons que le Rectangle doit se déplacer à la position (50,50) lorsque la souris est enfoncée puis revenir à sa position initiale lorsque la souris est relâchée. Cela peut être réalisé par le biais de la propriété when, comme ceci :

 Rectangle {
     ...
 
     MouseArea {
         id: mouseArea
         anchors.fill: parent
     }
 
     states: State {
         name: "moved"; when: mouseArea.pressed
         ...
     }
 }

On affecte à la propriété when une expression prenant la valeur true lorsque l'élément doit passer dans cet état. Lorsque la souris est enfoncée, l'état est changé à moved. Lorsqu'elle est relâchée, l'élément retourne à son état par défaut, qui définit toutes les valeurs originelles des propriétés de l'élément.

Alternativement, un élément peut être explicitement défini à son état par défaut en définissant la propriété state à une chaîne vide ( » »). Par exemple, au lieu d'utiliser la propriété when, le code ci-dessus peut être changé en :

 Rectangle {
     ...
 
     MouseArea {
         anchors.fill: parent
         onPressed: myRect.state = 'moved';
         onReleased: myRect.state = '';
     }
 
     states: State {
         name: "moved"
         ...
     }
 }

Bien entendu, il est préférable d'utiliser la propriété when autant que possible du fait qu'elle fournit une solution plus simple (et meilleure, plus déclarative) qu'une assignation d'état depuis les gestionnaires de signaux.

Animation des changements d'état

Les changements d'état peuvent aisément être animés à travers les transitions. Une Transition définit les animations qui devraient être appliquées lorsqu'un élément change d'un état à un autre.

Si l'exemple ci-dessus était modifié pour inclure la Transition suivante, le mouvement du Rectangle serait animé :

 Rectangle {
     ...
 
     MouseArea { ... }
 
     states: [
        ...
     ]
 
     transitions: [
         Transition {
             NumberAnimation { properties: "x,y"; duration: 500 }
         }
     ]
  }

Cette Transition définit que si l'une des propriétés x ou y change durant un changement d'état à l'intérieur de l'élément, leurs valeurs doivent être animées sur 500 millisecondes.

Voir la documentation des Transitions pour plus d'informations.

Remerciements

Merci à Louis du Verdier pour la traduction ainsi qu'à Jonathan Courtois, Ilya Diallo et Claude Leloup pour leur relecture !