Qt Quick États

Types associés

De nombreuses conceptions d'interface utilisateur sont basées sur l'état; les interfaces ont des configurations qui diffèrent en fonction de l'état actuel. Par exemple, un feu de signalisation configure ses drapeaux ou ses feux en fonction de son état. Dans l'état stop, un feu rouge s'allume tandis que les feux jaune et vert s'éteignent. Dans l'état caution, le feu jaune est allumé tandis que les autres feux sont éteints.

En QML, les états sont un ensemble de configurations de propriétés définies dans un type State. Différentes configurations peuvent, par exemple

• afficher certains composants de l'interface utilisateur et en cacher d'autres
• présenter différentes actions disponibles à l'utilisateur
• démarrer, arrêter ou mettre en pause des animations
• exécuter un script requis dans le nouvel état
• modifier la valeur d'une propriété pour un élément particulier
• Afficher une vue ou un écran différent

Tous les objets basés sur Item ont 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 a un name unique, une chaîne vide étant la valeur par défaut. Pour modifier l'état actuel d'un élément, attribuez à la propriété state le nom de l'état.

Les objets autres que les éléments peuvent utiliser des états par l'intermédiaire du 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 d'états pour cet élément.

Un composant d'avertissement signal peut avoir deux états, l'état NORMAL et l'état CRITICAL. Supposons que dans l'état NORMAL, le color du signal soit green et que l'avertissement flag soit désactivé. Dans le même temps, dans l'état CRITICAL, le color devrait être red et le drapeau est 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 modifie les valeurs des propriétés des objets. Les objets sont référencés par leur identifiant. Les objets extérieurs au composant sont également référencés à l'aide de la propriété id, comme le montre la modification de la propriété de l'objet externe flag.

En outre, l'état peut être modifié en attribuant à la propriété state l'état de signal approprié. Un commutateur d'état pourrait être de type MouseArea, 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 n'est pas limité à la modification des valeurs des propriétés. Il peut également

• Exécuter un script à l'aide de StateChangeScript
• Remplacer un gestionnaire de signal existant pour un objet en utilisant PropertyChanges
• Re-parenter un Item en utilisant ParentChange
• Modifier les valeurs d'ancrage en utilisant AnchorChanges

L'état par défaut

Chaque composant basé sur Item possède une propriété state et un état par défaut. L'état par défaut est 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 les changements d'état. La définition de la propriété state à une chaîne vide chargera l'état par défaut.

La propriété when

Par commodité, le type State possède une propriété when qui peut être liée à des expressions pour modifier l'état chaque fois que l'expression liée est évaluée à true. La propriété when ramène l'état à 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 passe à l'état RINGING chaque fois que signal.state est CRITICAL.

Animation des changements d'état

Les changements d'état induisent de brusques changements de valeur. Le type Transition permet des changements plus souples lors des changements d'état. Dans les transitions, les animations et les comportements d'interpolation sont définissables. L'article Animation et transitions contient plus d'informations sur la création d'animations d'état.

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

L'articleUtilisation des comportements Qt Quick avec les états explique un problème courant lors de l'utilisation des comportements pour animer les changements d'état.

Avance rapide d'un état

Pour que Transition anime correctement les changements d'état, il est parfois nécessaire que le moteur avance et recule rapidement dans 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 pour 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 inattendu. 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 appliquer, rembobiner, puis réappliquer), ce qui peut être relativement coûteux.

L'avance rapide d'un état doit être considérée comme un détail d'implémentation et peut changer dans les versions ultérieures.