QML 与状态机结合使用

效果点击后动画过渡，释放立刻变化：

 

 

1,创建QT QUICK APPLICATION工程，添加一个rect

qml

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    color: "#ffffff"
    title: qsTr("你好csdn")

    Rectangle {
        id: rectangle
        x: -8
        y: 0
        width: 648
        height: 480
        color: "#519809"
      }
}

2,添加状态

        state:"RELEASED";
        states:[
            State {
                name: "PRESSED"
                PropertyChanges {
                    target:rectangle;color:"blue";

                }
            },
            State {
                name: "RELEASED"
                PropertyChanges {
                    target: rectangle;color:"red";

                }
            }
        ]

3，添加按钮感应区

    MouseArea {
        id: mouseArea
        width: 100
        height: 100
        anchors.fill: parent;
        onPressed: rectangle.state="PRESSED";
        onReleased:rectangle.state="RELEASED";

    }

4，添加状态机之间的过渡动画

        transitions: [
           Transition {
               from: "RELEASED"
               to: "PRESSED"

               ColorAnimation {
                   target:rectangle ;
                   duration: 1000;
               }
           },
           Transition {
               from: "PRESSED"
               to: "RELEASEED"
               ColorAnimation {
                   target:rectangle ;
                   duration: 1000;
               }
           }

5,完成 完整代码如下

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    color: "#ffffff"
    title: qsTr("你好csdn")

    Rectangle {
        id: rectangle
        x: -8
        y: 0
        width: 648
        height: 480
        color: "#519809"

        state:"RELEASED";
        states:[
            State {
                name: "PRESSED"
                PropertyChanges {
                    target:rectangle;color:"blue";

                }
            },
            State {
                name: "RELEASED"
                PropertyChanges {
                    target: rectangle;color:"red";

                }
            }
        ]
        transitions: [
           Transition {
               from: "RELEASED"
               to: "PRESSED"

               ColorAnimation {
                   target:rectangle ;
                   duration: 1000;
               }
           },
           Transition {
               from: "PRESSED"
               to: "RELEASEED"
               ColorAnimation {
                   target:rectangle ;
                   duration: 1000;
               }
           }
       ]
    }
    MouseArea {
        id: mouseArea
        width: 100
        height: 100
        anchors.fill: parent;
        onPressed: rectangle.state="PRESSED";
        onReleased:rectangle.state="RELEASED";

    }

 }