QML-Tutorial 3 - Zustände und Übergänge

In diesem Kapitel machen wir das Beispiel ein wenig dynamischer, indem wir Zustände und Übergänge einführen.

Wir wollen, dass unser Text an den unteren Rand des Bildschirms wandert, sich dreht und rot wird, wenn er angeklickt wird.

Hier ist der QML-Code:

import QtQuick

Rectangle {
    id: page
    width: 320; height: 480
    color: "lightgray"

    Text {
        id: helloText
        text: "Hello world!"
        y: 30
        anchors.horizontalCenter: page.horizontalCenter
        font.pointSize: 24; font.bold: true

        MouseArea { id: mouseArea; anchors.fill: parent }

        states: State {
            name: "down"; when: mouseArea.pressed == true
            PropertyChanges {
                helloText {
                    y: 160
                    rotation: 180
                    color: "red"
                }
            }
        }

        transitions: Transition {
            from: ""; to: "down"; reversible: true
            ParallelAnimation {
                NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad }
                ColorAnimation { duration: 500 }
            }
        }
    }

    Grid {
        id: colorPicker
        x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4
        rows: 2; columns: 3; spacing: 3

        Cell { cellColor: "red"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "green"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "black"; onClicked: helloText.color = cellColor }
    }
}

Komplettlösung

        states: State {
            name: "down"; when: mouseArea.pressed == true
            PropertyChanges {
                helloText {
                    y: 160
                    rotation: 180
                    color: "red"
                }
            }
        }

Zunächst erstellen wir einen neuen Zustand für unseren Texttyp "nach unten". Dieser Zustand wird aktiviert, wenn die Taste MouseArea gedrückt wird, und deaktiviert, wenn sie losgelassen wird.

Der Abwärtszustand umfasst eine Reihe von Eigenschaftsänderungen gegenüber unserem impliziten Standardzustand (die Elemente, wie sie ursprünglich in QML definiert wurden). Insbesondere setzen wir die Eigenschaft y des Textes auf 160, die Rotation auf 180 und color auf rot.

        transitions: Transition {
            from: ""; to: "down"; reversible: true
            ParallelAnimation {
                NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad }
                ColorAnimation { duration: 500 }
            }
        }

Da wir nicht wollen, dass der Text sofort unten erscheint, sondern sich sanft bewegt, fügen wir einen Übergang zwischen unseren beiden Zuständen hinzu.

from und to definieren die Zustände, zwischen denen der Übergang stattfinden soll. In diesem Fall wollen wir einen Übergang vom Standardzustand zum Zustand "unten".

Da wir wollen, dass derselbe Übergang in umgekehrter Reihenfolge abläuft, wenn wir aus dem Abwärtszustand in den Standardzustand zurückwechseln, setzen wir reversible auf true. Dies ist gleichbedeutend damit, die beiden Übergänge getrennt zu schreiben.

Der Typ ParallelAnimation stellt sicher, dass die beiden Arten von Animationen (Zahl und Farbe) zur gleichen Zeit beginnen. Wir könnten sie auch nacheinander ablaufen lassen, indem wir stattdessen SequentialAnimation verwenden.

Weitere Einzelheiten zu Zuständen und Übergängen finden Sie unter Qt Quick Zustände und das Beispiel für Zustände und Übergänge.

QML-Tutorial 2 - QML-Komponenten

© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.