qml states 状态

states 状态

在QML中，states用于定义对象在不同状态下的属性变化。每个状态可以包含一组属性设置，当状态改变时，这些属性设置会被应用到对象上。

import QtQuick 2.15
import QtQuick.Controls 2.15// 定义应用程序的主窗口
ApplicationWindow {visible: true  // 使窗口可见width: 640     // 窗口宽度height: 480    // 窗口高度title: "QML 状态示例"  // 窗口标题// 定义一个矩形元素Rectangle {id: rectangle  // 矩形的唯一标识符width: 200     // 矩形的宽度height: 100    // 矩形的高度color: "lightblue"  // 矩形的初始颜色anchors.centerIn: parent  // 将矩形居中于父元素（即ApplicationWindow）// 定义一个文本元素Text {id: textElement  // 文本元素的唯一标识符text: "默认状态"  // 文本内容anchors.centerIn: parent  // 将文本居中于父元素（即Rectangle）}// 定义一个按钮元素Button {text: "切换状态"  // 按钮显示的文本anchors.top: parent.bottom  // 按钮位于矩形的下方anchors.horizontalCenter: parent.horizontalCenter  // 按钮水平居中于矩形onClicked: {// 按钮点击事件处理器// 如果当前状态是"clickedState"，则切换到"defaultState"，否则切换到"clickedState"if (rectangle.state === "clickedState") {rectangle.state = "defaultState";} else {rectangle.state = "clickedState";}}}// 定义矩形的状态states: [// 默认状态State {name: "defaultState"  // 状态名称PropertyChanges {target: rectangle  // 目标对象为矩形color: "lightblue"  // 将矩形的颜色改为浅蓝色}PropertyChanges {target: textElement  // 目标对象为文本元素text: "默认状态"  // 将文本内容改为"默认状态"}},// 点击状态State {name: "clickedState"  // 状态名称PropertyChanges {target: rectangle  // 目标对象为矩形color: "lightgreen"  // 将矩形的颜色改为浅绿色}PropertyChanges {target: textElement  // 目标对象为文本元素text: "点击状态"  // 将文本内容改为"点击状态"}}]}
}