QML之状态（States）、过渡（Transitions）的个人理解和简单使用

一、状态、过渡的使用示例

1.携带过渡效果的状态切换演示

下图通过双击图形触发状态的更新（槽函数），首次双击并未指定状态过渡效果（所以变化突兀），仅在两个图形之间状态的切换指定过渡（因此仅图形之间双击才会触发下图效果）。

2.直接切换State的效果演示

下图左侧按钮按下或右侧复选框勾选时设置新效果，两个按钮代表分别代表两个图形的位置更新

二、状态与过渡的个人理解

1.关于状态（States）

状态是指UI元素在不同的场景或用户操作下的一种特定效果（如鼠标悬浮在按钮上，按钮颜色变化等效果）。

1. 设置后仅仅是临时的改变QML元素的属性，当状态置空时相应属性值会恢复至初始状态。
2. 状态设置存在先后顺序，当同一时间满足两个状态条件时，只有先定义的State会生效。

2.关于过渡（Transitions）

过渡用于QML元素状态之间平滑切换（动画效果个性化定义）

1. 当State中某参数是根据原参数值关联变化（如width:width*2的关系），设置该参数动画时，动画结束时可能会以结束时的参数值做原参值关联变化（会有突兀变化的效果）。
   如下图：
   

三、源码

import QtQuick 2.0

import QtQuick.Controls 2.12

Item {
    id: satt

    // （状态）按钮
    Button {
        id: leftRectMoveBtn
        text: "左侧矩形移位"
    }

    // （状态）复选框
    CheckBox {
        id: rightRectMoveCheckBox
        text: "右侧矩形移位"
        checked: false
        // 锚点布局
        anchors.left: leftRectMoveBtn.right
    }

    // 测试按钮
//    Button {
//        id: testBtn
//        text: "状态置空"
//        onClicked: satt.state = "" //console.log(leftRect.width)
//        anchors.left: rightRectMoveCheckBox.right
//        anchors.leftMargin: 20

//    }

    // 定义第一个图形
    Rectangle {
        id: leftRect
        x: 100
        y: 100
        width: 50
        height: width
        radius: width / 2
        color: "skyblue"
        // 状态更新操作
        MouseArea {
            id: leftMouseArea
            anchors.fill: parent
            onDoubleClicked: satt.state = "leftDoubleClickWithTransition"
        }
    }


    // 定义第二个图形
    Rectangle {
        id:  rightRect
        x: 200
        y: 100
        width: leftRect.width
        height: width
        radius: width / 2
        color: "lightgray"
        // 状态更新操作
        MouseArea {
            id: rightMouseArea
            anchors.fill: parent
            onDoubleClicked: satt.state = "rightDoubleClickWithTransition"
        }
    }

    states: [
        // **********
        // Sate通过when指定属性变化使用状态
        // **********
        State {
            name: "leftRectMove"
            // 当leftRectMoveBtn按下时触发，释放即恢复
            when: leftRectMoveBtn.pressed
            // 位置属性值更新
            PropertyChanges {
                target: leftRect
                x: 300
                y: 300
            }
        },

        State {
            name: "rightRectMove"
            // 当rightRectMoveCheckBox勾选时触发，取消勾选即恢复
            when: rightRectMoveCheckBox.checkState
            // 位置属性值更新
            PropertyChanges {
                target: rightRect
                x: 5
                y: 300
            }
        },

        // **********
        // Sate通过主动设置使用状态
        // **********
        State {
            name: "leftDoubleClickWithTransition"
            // 左侧元素 宽度、高度、颜色变化
            PropertyChanges {
                target: leftRect
                width: 100
                height: width
                color: "blue"
            }

            // 右侧元素 宽度、高度、颜色变化
            PropertyChanges {
                target: rightRect
                width: 50
                height: width
                color: "lightgray"
            }
        },

        State {
            name: "rightDoubleClickWithTransition"
            // 左侧侧元素 宽度、高度、颜色变化
            PropertyChanges {
                target: leftRect
                width: 50
                height: width
                color: "lightblue"
            }

            // 右侧元素 宽度、高度、颜色变化
            PropertyChanges {
                target: rightRect
                width: 100
                height: width
                color: "gray"
            }
        }
    ]

    // **********
    // Sate切换的过渡
    // **********
    transitions: [
        Transition {
            from: "leftDoubleClickWithTransition"
            to: "rightDoubleClickWithTransition"
            // 左侧图形的动画效果设置
            ColorAnimation {
                target: leftRect
                properties: "color"
                duration: 1500
            }
            PropertyAnimation {
                target: leftRect
                properties: "width,height"
                duration: 1500
            }

            // 右侧熟悉的动画属性设置
            ColorAnimation {
                target: rightRect
                properties: "color"
                duration: 1500
            }
            PropertyAnimation {
                target: rightRect
                properties: "width,height"
                duration: 1500
            }
        },

        Transition {
            from: "rightDoubleClickWithTransition"
            to: "leftDoubleClickWithTransition"
            // 左侧图形的动画效果设置
            ColorAnimation {
                target: leftRect
                properties: "color"
                duration: 1500
            }
            PropertyAnimation {
                target: leftRect
                properties: "width,height"
                duration: 1500
            }

            // 左侧图形的动画效果设置
            ColorAnimation {
                target: rightRect
                properties: "color"
                duration: 1500
            }
            PropertyAnimation {
                target: rightRect
                properties: "width,height"
                duration: 1500
            }
        }
    ]
}

友情提示——哪里看不懂可私哦，让我们一起互相进步吧
（创作不易，请留下一个免费的赞叭 谢谢 ^o^/)

注：文章为作者编程过程中所遇到的问题和总结，内容仅供参考，若有错误欢迎指出。
注：如有侵权，请联系作者删除