在Qt Quick 中将行为与状态结合使用

在状态中使用行为

在某些情况下，您可能会选择使用“行为”来对因状态变化而引起的属性变化进行动画处理。虽然这种方法在某些情况下效果良好，但在其他情况下可能会导致意外行为。

以下示例展示了该问题：

import QtQuick 2.0

Rectangle {
    width: 400
    height: 400

    Rectangle {
        id: coloredRect
        width: 100
        height: 100
        anchors.centerIn: parent

        color: "red"
        Behavior on color {
            ColorAnimation {}
        }

        MouseArea {
            id: mouser
            anchors.fill: parent
            hoverEnabled: true
        }

        states: State {
            name: "GreenState"
            when: mouser.containsMouse

            PropertyChanges {
                target: coloredRect
                color: "green"
            }
        }
    }
}

通过快速反复将鼠标移入并移出彩色矩形来测试该示例，会发现彩色矩形会随时间逐渐变为绿色，而不会恢复为纯红色。这并非我们想要的效果！问题在于，我们使用“行为”来为颜色变化添加动画效果，而状态变化是由鼠标进入或离开MouseArea 触发的，这种触发方式很容易被中断。

更正式地说，当出现以下情况时，同时使用状态和行为可能会导致意外行为：

当使用“行为”来实现属性变化的动画效果时，特别是从显式定义的状态切换回隐式基础状态时；以及
该“行为”可能因中断而被（重新）引入到显式定义的状态中。

该问题源于 QML 中对基状态的定义方式：它被定义为应用程序在进入显式定义状态之前的“快照”状态。在这种情况下，如果我们正在从绿色动画过渡回红色，并中断动画以返回“GreenState”，则基状态将包含该颜色在动画中途的中间状态。

虽然未来的 QML 版本应该能够更优雅地处理这种情况，但目前有几种方法可以重构您的应用程序以避免此问题。

1. 使用过渡效果来实现动画变化，而不是使用 Behavior。

import QtQuick 2.0

Rectangle {
    width: 400
    height: 400

    Rectangle {
        id: coloredRect
        width: 100
        height: 100
        anchors.centerIn: parent

        color: "red"

        MouseArea {
            id: mouser
            anchors.fill: parent
            hoverEnabled: true
        }

        states: State {
            name: "GreenState"
            when: mouser.containsMouse

            PropertyChanges {
                target: coloredRect
                color: "green"
            }
        }

        transitions: Transition {
            ColorAnimation {}
        }
    }
}

2. 使用条件绑定来更改属性值，而非状态

import QtQuick 2.0

Rectangle {
    width: 400
    height: 400

    Rectangle {
        id: coloredRect
        width: 100
        height: 100
        anchors.centerIn: parent

        color: mouser.containsMouse ? "green" : "red"
        Behavior on color {
            ColorAnimation {}
        }

        MouseArea {
            id: mouser
            anchors.fill: parent
            hoverEnabled: true
        }
    }
}

3. 仅使用显式定义的状态，而非隐式基状态

import QtQuick 2.0

Rectangle {
    width: 400
    height: 400

    Rectangle {
        id: coloredRect
        width: 100
        height: 100
        anchors.centerIn: parent

        Behavior on color {
            ColorAnimation {}
        }

        MouseArea {
            id: mouser
            anchors.fill: parent
            hoverEnabled: true
        }

        states: [
        State {
            name: "GreenState"
            when: mouser.containsMouse

            PropertyChanges {
                target: coloredRect
                color: "green"
            }
        },
        State {
            name: "RedState"
            when: !mouser.containsMouse

            PropertyChanges {
                target: coloredRect
                color: "red"
            }
        }]
    }
}

状态动画与过渡

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.