---

状态

状态是界面中元素的一种特定外观或行为，常见的状态有：可见/隐藏、激活/非激活、展开/折叠等。通过改变元素的属性或样式，可以实现这些状态的切换，从而让界面更加动态和富有交互性。

在 QML 中，状态由 State 元素定义。每个状态需要一个唯一的名称（name），并定义在该状态下，目标元素的属性或样式会如何改变。我们通过 states 属性列出所有可能的状态，并使用 state 属性指定元素的当前状态。

接下来通过几个简单的例子演示如何在 QML 中使用状态。

---

示例 1：矩形的可见/隐藏切换

在这个例子中，我们实现了一个蓝色矩形，通过鼠标点击可以切换其可见和隐藏状态。

import QtQuick
import QtQuick.ControlsRectangle {width: 200height: 200color: "lightgray"Rectangle {id: rectanglewidth: 100height: 100anchors.centerIn: parentcolor: "blue"state: "visibleState"  // 初始状态states: [State {name: "visibleState"PropertyChanges { target: rectangle; opacity: 1 }},State {name: "hiddenState"PropertyChanges { target: rectangle; opacity: 0 }}]}MouseArea {anchors.fill: parentonClicked: {// 切换状态rectangle.state = (rectangle.state === "visibleState") ? "hiddenState" : "visibleState";}}
}

功能介绍：

1. 定义了两个状态：
   • visibleState：矩形完全可见（opacity: 1）。
   • hiddenState：矩形完全隐藏（opacity: 0）。
2. 通过鼠标点击，切换矩形的状态，显示或隐藏矩形。

---

示例 2：按钮的激活/非激活状态

接下来实现一个按钮，点击后改变其背景颜色和大小，表示它被激活或非激活。

import QtQuick
import QtQuick.ControlsRectangle {width: 300height: 200color: "white"Rectangle {id: buttonwidth: 100height: 50anchors.centerIn: parentcolor: "gray"radius: 10state: "inactive"states: [State {name: "inactive"PropertyChanges {target: buttoncolor: "gray"scale: 1}},State {name: "active"PropertyChanges {target: buttoncolor: "green"scale: 1.2}}]}MouseArea {anchors.fill: parentonClicked: {// 切换按钮的激活状态button.state = (button.state === "inactive") ? "active" : "inactive";}}
}

功能介绍：

1. 定义了两个状态：
   • inactive：按钮为灰色且大小为正常比例。
   • active：按钮变为绿色，且略微放大。
2. 鼠标点击后，按钮在两种状态间切换，直观地表现激活和非激活状态。

---

示例 3：面板的展开/折叠

实现一个面板，点击后可以在展开和折叠状态之间切换。

import QtQuick
import QtQuick.ControlsRectangle {width: 300height: 200color: "lightblue"Rectangle {id: panelwidth: 200height: 50anchors.horizontalCenter: parent.horizontalCentercolor: "lightgray"state: "collapsed"states: [State {name: "collapsed"PropertyChanges {target: panelheight: 50}},State {name: "expanded"PropertyChanges {target: panelheight: 150}}]}Text {text: "Click to Toggle"anchors.horizontalCenter: panel.horizontalCenteranchors.verticalCenter: panel.verticalCenter}MouseArea {anchors.fill: parentonClicked: {// 切换面板状态panel.state = (panel.state === "collapsed") ? "expanded" : "collapsed";}}
}

功能介绍：

1. 定义了两个状态：
   • collapsed：面板高度为 50 像素。
   • expanded：面板高度扩展到 150 像素。
2. 鼠标点击后，面板在展开和折叠之间切换。

---

示例 4：灯泡的开/关

最后，我们用一个灯泡的示例来演示状态的视觉效果切换。

import QtQuick
import QtQuick.ControlsRectangle {width: 200height: 200color: "black"Rectangle {id: bulbwidth: 100height: 100anchors.centerIn: parentradius: 50color: "gray"state: "off"states: [State {name: "off"PropertyChanges { target: bulb; color: "gray" }},State {name: "on"PropertyChanges { target: bulb; color: "yellow" }}]}MouseArea {anchors.fill: parentonClicked: {// 切换灯泡状态bulb.state = (bulb.state === "off") ? "on" : "off";}}
}

功能介绍：

1. off 状态：灯泡为灰色，表示关闭。
2. on 状态：灯泡为黄色，表示点亮。
3. 鼠标点击后，灯泡颜色会在灰色和黄色之间切换，模拟开关效果。

---

总结

在 QML 中，通过定义 State 和使用 PropertyChanges，可以轻松实现界面元素的动态效果。无论是可见性切换、激活效果，还是更复杂的展开/折叠或开关模拟，都可以通过状态来完成。这种方式不仅代码简洁，还让界面逻辑更加清晰和直观。