Qt Quick Zustände

Verwandte Typen

Viele Benutzeroberflächen sind zustandsgesteuert; die Oberflächen verfügen über Konfigurationen, die je nach aktuellem Zustand variieren. Beispielsweise konfiguriert eine Ampel ihre Signale oder Lichter je nach Zustand. Im Zustand „ stop “ der Ampel leuchtet das rote Licht, während das gelbe und das grüne Licht ausgeschaltet sind. Im Zustand „ caution “ leuchtet das gelbe Licht, während die anderen Lichter ausgeschaltet sind.

In QML sind Zustände eine Reihe von Eigenschaftskonfigurationen, die in einem Typ „ State “ definiert sind. Verschiedene Konfigurationen könnten beispielsweise:

• bestimmte UI-Komponenten anzeigen und andere ausblenden
• dem Benutzer verschiedene verfügbare Aktionen anzeigen
• Animationen starten, stoppen oder pausieren
• ein Skript ausführen, das im neuen Zustand benötigt wird
• einen Eigenschaftswert für ein bestimmtes Element ändern
• Eine andere Ansicht oder einen anderen Bildschirm anzeigen

Alle auf „ Item “ basierenden Objekte verfügen über eine „ state “-Eigenschaft und können zusätzliche Zustände festlegen, indem neue „ State “-Objekte zur „ states “-Eigenschaft des Elements hinzugefügt werden. Jeder Zustand innerhalb einer Komponente hat einen eindeutigen „ name “; standardmäßig ist dies eine leere Zeichenfolge. Um den aktuellen Zustand eines Elements zu ändern, setzen Sie die „ state “-Eigenschaft auf den Namen des Zustands.

Objekte, die keine Elemente sind, können Zustände über den Typ „ StateGroup “ verwenden.

Zustände erstellen

Um einen Zustand zu erstellen, fügen Sie ein „ State “-Objekt zur Eigenschaft „ states “ des Elements hinzu, die eine Liste der Zustände für dieses Element enthält.

Eine Warnkomponente vom Typ „ signal “ kann zwei Zustände haben: den Zustand „ NORMAL “ und den Zustand „ CRITICAL “. Angenommen, im Zustand „ NORMAL “ soll die „ color “ des Signals „ green “ lauten und die Warnung „ flag “ deaktiviert sein. Im Zustand „ CRITICAL “ hingegen soll die „ color “ „ red “ lauten und die Flag-Einstellung „ up “ lauten. Wir können die Zustände mithilfe des Typs „ State “ modellieren und die Farb- und Flag-Konfigurationen mit dem Typ „ PropertyChanges “ festlegen.

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"}
        }
    ]
}

Der Typ „ PropertyChanges “ ändert die Werte von Objekteigenschaften. Objekte werden über ihre ID referenziert. Objekte außerhalb der Komponente werden ebenfalls über die Eigenschaft „ id “ referenziert, wie beispielsweise bei der Änderung der Eigenschaft des externen Objekts „ flag “.

Darüber hinaus kann sich der Zustand ändern, indem der Eigenschaft „ state “ der entsprechende Signalzustand zugewiesen wird. Ein Zustandswechsel könnte beispielsweise im Typ „ MouseArea “ erfolgen, wobei bei jedem Mausklick auf das Signal ein anderer Zustand zugewiesen wird.

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"
        }
    }
}

Der Typ „State“ beschränkt sich nicht nur auf die Änderung von Eigenschaftswerten. Er kann außerdem:

• ein Skript ausführen mithilfe von StateChangeScript
• einen vorhandenen Signal-Handler für ein Objekt überschreiben PropertyChanges
• ein „ Item “ neu zuverweisen mithilfe von ParentChange
• Ankerwerte ändern mithilfe von AnchorChanges

Der Standardzustand

Jede auf „ Item “ basierende Komponente verfügt über eine Eigenschaft „ state “ und einen Standardzustand. Der Standardzustand ist die leere Zeichenfolge ("") und enthält alle anfänglichen Eigenschaftswerte eines Elements. Der Standardzustand ist nützlich, um Eigenschaftswerte vor Zustandsänderungen zu verwalten. Durch Setzen der Eigenschaft „ state “ auf eine leere Zeichenfolge wird der Standardzustand geladen.

Die Eigenschaft „ when “

Der Typ „ State “ verfügt praktischerweise über die Eigenschaft „ when “, die an Ausdrücke gebunden werden kann, um den Zustand zu ändern, sobald der gebundene Ausdruck den Wert „ true “ ergibt. Die Eigenschaft „ when “ setzt den Zustand wieder auf den Standardzustand zurück, sobald der Ausdruck den Wert „false“ ergibt.

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

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

Die Komponente „ bell “ wechselt in den Zustand „ RINGING “, sobald der Ausdruck „ signal.state “ den Wert „ CRITICAL “ annimmt.

Animation von Zustandsänderungen

Zustandsänderungen führen zu abrupten Wertänderungen. Der Typ „ Transition “ ermöglicht sanftere Übergänge bei Zustandsänderungen. In Übergängen lassen sich Animationen und Interpolationsverhalten definieren. Der Artikel „Animation und Übergänge“ enthält weitere Informationen zum Erstellen von Zustandsanimationen.

Das Beispiel „Animation“ veranschaulicht, wie man einen grundlegenden Satz von Zuständen deklariert und animierte Übergänge zwischen diesen anwendet.

Der Artikel„Verwendung von ‚ Qt Quick ‘-Verhalten mit Zuständen“ erläutert ein häufiges Problem bei der Verwendung von „Behaviors“ zur Animation von Zustandsänderungen.

Schnellvorlauf bei Zuständen

Damit „Transition“ Zustandswechsel korrekt animieren kann, ist es manchmal erforderlich, dass die Engine einen Zustand vor- und zurückspult (d. h. den Zustand intern setzt und wieder aufhebt), bevor er endgültig angewendet wird. Der Vorgang läuft wie folgt ab:

1. Der Zustand wird vorwärtsgespult, um den vollständigen Satz von Endwerten zu ermitteln.
2. Der Zustand wird zurückgespult.
3. Der Zustand wird vollständig angewendet, einschließlich der Übergänge.

In einigen Fällen kann dies zu unbeabsichtigtem Verhalten führen. Beispielsweise setzt ein Zustand, der das Modell einer Ansicht oder die `sourceComponent` eines Loaders ändert, diese Eigenschaften mehrfach (zum Anwenden, Zurückspulen und anschließenden erneuten Anwenden), was relativ ressourcenintensiv sein kann.

Das Schnellvorlaufen des Zustands sollte als Implementierungsdetail betrachtet werden und kann sich in späteren Versionen ändern.