---

狀態

狀態是界面中元素的一種特定外觀或行為，常見的狀態有：可見/隱藏、激活/非激活、展開/折疊等。通過改變元素的屬性或樣式，可以實現這些狀態的切換，從而讓界面更加動態和富有交互性。

在 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，可以輕松實現界面元素的動態效果。無論是可見性切換、激活效果，還是更復雜的展開/折疊或開關模擬，都可以通過狀態來完成。這種方式不僅代碼簡潔，還讓界面邏輯更加清晰和直觀。