九、QML状态与过渡全解析：从基础到状态机设计

第9章：状态与过渡

📘 章节概述

在QML界面设计中，状态（State）与过渡（Transition）是打造动态、交互式界面的核心。它们能让界面元素根据用户输入、数据变化切换外观与行为，还能用平滑动画衔接状态变化，给用户带来丝滑的交互体验。本章将从基础定义到进阶模式，全面拆解这些关键技术。

🎯 1. State（状态）定义

状态可以理解为组件在特定时刻的「属性快照」——一个QML元素可以拥有多个状态，默认状态为空字符串（即基础状态）。

状态的核心特性包括：

states属性：用来定义组件的状态列表，是一组State对象的集合；
State.name：每个状态的唯一标识，比如给按钮的按下状态命名为"PRESSED"；
PropertyChanges：在状态中声明目标元素要修改的属性及值，比如让按钮颜色变为橙色；
State.extend：允许一个状态继承另一个状态的属性变化，减少重复代码。

示例：给按钮定义按下、hover两种状态

import QtQuick 2.15
import QtQuick.Controls 2.15

Rectangle {
    id: button
    width: 150; height: 50
    color: "lightblue"
    radius: 10
    border.color: "blue"

    // 定义状态
    states: [
        State {
            name: "PRESSED"
            PropertyChanges { target: button; color: "orange"; scale: 0.95 }
            PropertyChanges { target: label; text: "已按下!" }
        },
        State {
            name: "HOVERED"
            PropertyChanges { target: button; color: "skyblue"; border.width: 3 }
        }
    ]

    Text { id: label; anchors.centerIn: parent; text: "点击我" }

    // 鼠标交互触发状态切换
    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onPressed: button.state = "PRESSED"
        onReleased: button.state = ""
        onEntered: button.state = "HOVERED"
        onExited: button.state = ""
    }
}

🔀 2. when属性与状态切换

when属性是QML声明式风格的体现，它提供了自动触发状态切换的条件：当when的表达式为true时，对应的状态会自动激活，比手动写脚本设置state属性更清晰易维护。

示例：用when属性实现开关状态切换

import QtQuick 2.15

Rectangle {
    id: toggleSwitch
    width: 80; height: 40
    radius: 20
    color: "lightgray"

    // 滑块元素
    Rectangle {
        id: slider
        x: 5; y: 5
        width: 30; height: 30
        radius: 15
        color: "white"
        Behavior on x { NumberAnimation { duration: 200 } }
    }

    // 状态定义，绑定when条件
    states: [
        State {
            name: "ON"
            when: toggleSwitch.isOn  // isOn为true时激活ON状态
            PropertyChanges { target: slider; x: toggleSwitch.width - slider.width - 5 }
            PropertyChanges { target: toggleSwitch; color: "limegreen" }
        }
    ]

    // 自定义属性，控制when条件
    property bool isOn: false

    // 点击切换状态
    MouseArea {
        anchors.fill: parent
        onClicked: toggleSwitch.isOn = !toggleSwitch.isOn
    }

    Text {
        anchors.centerIn: parent
        text: toggleSwitch.isOn ? "开" : "关"
        font.bold: true
    }
}

🎨 3. Transition（过渡）动画

过渡是状态切换时的「动画桥梁」，定义了属性值从当前状态平滑过渡到目标状态的方式。每个过渡可以关联特定的状态变化，也能适配任意状态切换。

过渡的核心属性：

from：指定起始状态，用"*"代表任意状态；
to：指定目标状态，"*"同样代表任意状态；
animations：定义要执行的动画列表；
reversible：设置过渡是否可逆，开启后状态反转时自动播放反向动画。

常用动画类型：

NumberAnimation：针对x、width、opacity等数字属性做动画，可设置时长、缓动类型；
ColorAnimation：专门处理颜色属性的平滑变化；
RotationAnimation：实现元素旋转的动画效果；
ParallelAnimation/SequentialAnimation：分别用来并行或顺序执行多个动画。

示例：为状态切换添加平滑过渡

import QtQuick 2.15

Rectangle {
    id: box
    width: 100; height: 100
    color: "tomato"
    radius: 10

    states: [
        State {
            name: "MOVED_RIGHT"
            PropertyChanges { target: box; x: 250; rotation: 180; color: "gold" }
        },
        State {
            name: "SCALED_UP"
            PropertyChanges { target: box; scale: 1.5; color: "mediumseagreen" }
        }
    ]

    // 定义不同状态切换的过渡动画
    transitions: [
        // 任意状态切换到MOVED_RIGHT的过渡
        Transition {
            from: "*"; to: "MOVED_RIGHT"
            ParallelAnimation {
                NumberAnimation { properties: "x,rotation"; duration: 800; easing.type: Easing.OutBounce }
                ColorAnimation { duration: 800 }
            }
        },
        // 任意状态切换到SCALED_UP的过渡
        Transition {
            to: "SCALED_UP"
            NumberAnimation { property: "scale"; duration: 500; easing.type: Easing.InOutQuad }
            ColorAnimation { duration: 500 }
        },
        // 任意状态切换到默认状态的可逆过渡
        Transition {
            from: "*"; to: ""
            reversible: true
            NumberAnimation { properties: "x,rotation,scale"; duration: 400 }
            ColorAnimation { duration: 400 }
        }
    ]

    // 控制按钮
    Row {
        anchors.top: box.bottom; anchors.topMargin: 30
        spacing: 10
        Button { text: "右移旋转"; onClicked: box.state = "MOVED_RIGHT" }
        Button { text: "放大变色"; onClicked: box.state = "SCALED_UP" }
        Button { text: "重置"; onClicked: box.state = "" }
    }
}

🏗️ 4. 状态机设计模式在QML中的应用

当交互逻辑复杂时（比如登录流程、游戏角色状态、设备控制流程），单独管理状态会变得混乱。Qt提供的QtQml.StateMachine模块，支持分层、并行状态，能让状态逻辑与界面表现分离，代码更易维护扩展。

使用QML状态机的基本步骤：

导入模块：import QtQml.StateMachine 1.15；
创建StateMachine作为状态容器；
定义多个State，并设置初始状态initialState；
用SignalTransition（信号触发）或TimeoutTransition（超时触发）定义状态转换条件；
启动状态机：stateMachine.start()。

示例：模拟下载流程的状态机

import QtQuick 2.15
import QtQml.StateMachine 1.15 as DSM

Rectangle {
    width: 400; height: 200
    color: "whitesmoke"

    DSM.StateMachine {
        id: stateMachine
        initialState: idleState

        // 定义三个状态：就绪、下载中、完成
        DSM.State {
            id: idleState
            onEntered: statusText.text = "就绪，点击开始下载"
        }
        DSM.State {
            id: downloadingState
            onEntered: {
                statusText.text = "下载中..."
                timer.start() // 模拟下载耗时
            }
            onExited: timer.stop()
        }
        DSM.State {
            id: finishedState
            onEntered: statusText.text = "下载完成！"
        }

        // 状态转换规则
        transitions: [
            DSM.SignalTransition {
                fromState: idleState; toState: downloadingState
                signal: startButton.clicked
            },
            DSM.TimeoutTransition {
                fromState: downloadingState; toState: finishedState
                timeout: 3000 // 模拟3秒下载
            },
            DSM.SignalTransition {
                fromState: finishedState; toState: idleState
                signal: resetButton.clicked
            }
        ]
    }

    // 界面元素
    Text { id: statusText; anchors.centerIn: parent; font.pixelSize: 20 }
    Row {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom; anchors.bottomMargin: 30
        spacing: 20
        Button {
            id: startButton
            text: "开始下载"
            enabled: stateMachine.running && stateMachine.currentState === idleState
        }
        Button {
            id: resetButton
            text: "重置"
            enabled: stateMachine.running && stateMachine.currentState === finishedState
        }
    }

    Timer { id: timer; interval: 100; repeat: true }

    Component.onCompleted: stateMachine.start()
}

✅ 本章总结

状态是组件特定条件下的属性集合，通过states属性定义；when属性提供声明式状态切换条件，让代码更清晰；过渡动画让状态切换更丝滑，提升用户体验；复杂交互逻辑用状态机模式分层管理，实现高效的状态控制。合理运用这些技术，就能构建出响应迅速、动画流畅、逻辑清晰的现代QML应用界面。