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: "点击状态"  // 将文本内容改为"点击状态"
                }
            }
        ]
    }
}