QML-Tutorial 3 – Zustände und Übergänge
In diesem Kapitel machen wir dieses Beispiel durch die Einführung von Zuständen und Übergängen etwas dynamischer.
Wir möchten, dass sich unser Text beim Anklicken an den unteren Bildschirmrand bewegt, gedreht wird und rot 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 }
}
}Schritt-für-Schritt-Anleitung
states: State {
name: "down"; when: mouseArea.pressed == true
PropertyChanges {
helloText {
y: 160
rotation: 180
color: "red"
}
}
}Zunächst erstellen wir einen neuen „down“-Zustand für unseren Text-Typ. Dieser Zustand wird aktiviert, wenn die Taste „ MouseArea “ gedrückt wird, und deaktiviert, wenn sie losgelassen wird.
Der „down“- Zustand umfasst eine Reihe von Eigenschaftsänderungen gegenüber unserem impliziten Standardzustand (den Elementen, wie sie ursprünglich im QML definiert wurden). Konkret setzen wir die Eigenschaft „ y “ des Textes auf „ 160 “, die Rotation auf „ 180 “ und die Eigenschaft „ color “ auf „red“.
transitions: Transition {
from: ""; to: "down"; reversible: true
ParallelAnimation {
NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad }
ColorAnimation { duration: 500 }
}
}Da wir nicht möchten, dass der Text sofort ganz unten erscheint, sondern sich sanft bewegt, fügen wir einen Übergang zwischen unseren beiden Zuständen ein.
from und „ to “ definieren die Zustände, zwischen denen der Übergang abläuft. In diesem Fall möchten wir einen Übergang vom Standardzustand zu unserem „down“-Zustand.
Da wir möchten, dass derselbe Übergang in umgekehrter Richtung ausgeführt wird, wenn wir vom „down “-Zustand zurück zum Standardzustand wechseln, setzen wir „ reversible “ auf „ true “. Dies entspricht der separaten Angabe der beiden Übergänge.
Der Typ „ ParallelAnimation “ stellt sicher, dass die beiden Animationsarten (Zahl und Farbe) gleichzeitig starten. Wir könnten sie auch nacheinander ausführen, indem wir stattdessen „ SequentialAnimation “ verwenden.
Weitere Informationen zu Zuständen und Übergängen finden Sie unter „Qt Quick -Zustände“ und im Beispiel zu Zuständen und Übergängen.
© 2026 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.
