Qt Quick États

Types associés

De nombreuses conceptions d’interface utilisateur sont pilotées par l’état; les interfaces présentent des configurations qui varient en fonction de l’état actuel. Par exemple, un feu de signalisation configure ses drapeaux ou ses feux en fonction de son état. Lorsque le feu est à l’état « stop », le feu rouge s’allume tandis que les feux orange et vert s’éteignent. Dans l’état « caution », le feu jaune est allumé tandis que les autres feux sont éteints.

En QML, les états correspondent à un ensemble de configurations de propriétés définies dans un type « State ». Différentes configurations pourraient, par exemple :

• Afficher certains composants de l’interface utilisateur et en masquer d’autres
• Présenter différentes actions disponibles à l’utilisateur
• Lancer, arrêter ou mettre en pause des animations
• Exécuter un script requis dans le nouvel état
• Modifier la valeur d’une propriété d’un élément particulier
• Afficher une vue ou un écran différent

Tous les objets basés sur l'interface « Item » disposent d'une propriété « state » et peuvent spécifier des états supplémentaires en ajoutant de nouveaux objets « State » à la propriété « states » de l'élément. Chaque état au sein d'un composant possède un nom unique « name », la chaîne vide étant la valeur par défaut. Pour modifier l'état actuel d'un élément, définissez la propriété « state » sur le nom de l'état.

Les objets autres que des éléments peuvent utiliser des états via le type 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 de cet élément.

Un composant d’avertissement de type « signal » peut avoir deux états : l’état « NORMAL » et l’état « CRITICAL ». Supposons que dans l’état « NORMAL », la valeur de la propriété « color » du signal doive être « green » et que l’avertissement « flag » soit désactivé. Par ailleurs, dans l’état « CRITICAL », la valeur de la propriété « color » doit être « red » et le drapeau doit être « up ». Nous pouvons modéliser les états à l’aide du type « State » et les configurations de couleur et de drapeau à l’aide du type « PropertyChanges ».

Rectangle {
    id: signal
    width: 200; height: 200
    state: "NORMAL"

    states: [
        State {
            name: "NORMAL"
            PropertyChanges { signal.color: "green"}
            PropertyChanges { flag.state: "FLAG_DOWN"}
        },
        State {
            name: "CRITICAL"
            PropertyChanges { signal.color: "red"}
            PropertyChanges { flag.state: "FLAG_UP"}
        }
    ]
}

Le type PropertyChanges permet de modifier les valeurs des propriétés d’un objet. Les objets sont référencés via leur identifiant (id). Les objets situés en dehors du composant sont également référencés à l’aide de la propriété id, comme l’illustre la modification de la propriété de l’objet externe flag.

De plus, l’état peut changer en attribuant à la propriété « state » l’état de signal approprié. Un changement d’état pourrait se produire dans un type « MouseArea », en attribuant un état différent chaque fois que le signal reçoit un clic de souris.

Rectangle {
    id: signalswitch
    width: 75; height: 75
    color: "blue"

    MouseArea {
        anchors.fill: parent
        onClicked: {
            if (signal.state == "NORMAL")
                signal.state = "CRITICAL"
            else
                signal.state = "NORMAL"
        }
    }
}

Le type State ne se limite pas à la modification des valeurs de propriété. Il permet également :

• Exécuter un script à l’aide de StateChangeScript
• Remplacer un gestionnaire de signal existant pour un objet à l’aide de PropertyChanges
• Changer le parent d’un objet de type ` Item ` à l’aide de ParentChange
• Modifier les valeurs d’ancrage à l’aide de AnchorChanges

L'état par défaut

Chaque composant basé sur l’ Item dispose d’une propriété « state » et d’un état par défaut. L’état par défaut correspond à la chaîne vide ("") et contient toutes les valeurs initiales des propriétés d’un élément. L’état par défaut est utile pour gérer les valeurs des propriétés avant tout changement d’état. Définir la propriété « state » sur une chaîne vide chargera l’état par défaut.

La propriété « when »

Pour plus de commodité, le type ` State ` dispose d’une propriété ` when ` qui peut être liée à des expressions afin de modifier l’état dès que l’expression liée est évaluée à ` true`. La propriété ` when ` rétablit l’état par défaut lorsque l’expression est évaluée à `false`.

Rectangle {
    id: bell
    width: 75; height: 75
    color: "yellow"

    states: State {
                name: "RINGING"
                when: (signal.state == "CRITICAL")
                PropertyChanges {speaker.play: "RING!"}
            }
}

Le composant bell passera à l'état « RINGING » dès que l'expression « signal.state » prendra la valeur « CRITICAL ».

Animation des changements d’état

Les changements d’état entraînent des variations brusques de valeur. Le type « Transition » permet des transitions plus fluides lors des changements d’état. Dans les transitions, il est possible de définir des animations et des comportements d’interpolation. L’article « Animation et transitions » fournit davantage d’informations sur la création d’animations d’état.

L’exemple « Animation » montre comment déclarer un ensemble de base d’états et appliquer des transitions animées entre ceux-ci.

La section «Utilisation des comportements d’ Qt Quick s avec les états » explique un problème courant lié à l’utilisation des comportements pour animer les changements d’état.

Avance rapide des états

Pour que la transition anime correctement les changements d’état, il est parfois nécessaire que le moteur avance et recule rapidement un état (c’est-à-dire qu’il active et désactive l’état en interne) avant qu’il ne soit finalement appliqué. Le processus est le suivant :

1. L’état est avancé rapidement afin de déterminer l’ensemble complet des valeurs finales.
2. L’état est rembobiné.
3. L’état est entièrement appliqué, avec les transitions.

Dans certains cas, cela peut entraîner un comportement indésirable. Par exemple, un état qui modifie le modèle d’une vue ou le `sourceComponent` d’un chargeur définira ces propriétés plusieurs fois (pour les appliquer, revenir en arrière, puis les réappliquer), ce qui peut s’avérer relativement coûteux en ressources.

L'avance rapide de l’état doit être considérée comme un détail d’implémentation et est susceptible d’évoluer dans les versions ultérieures.