QML states和transitions的使用

小灰灰搞电子2025-01-12 22:52

一、介绍

1、states

Qml states是指在Qml中定义的一组状态（States），用于管理UI元素的状态转换和属性变化。每个状态都包含一组属性值的集合，并且可以在不同的状态间进行切换。

通过定义不同的状态，可以在不同的应用场景中快速切换和管理UI元素的外观和行为，从而实现动态的用户界面。

在Qml中，可以通过State元素来定义不同的状态，以及在不同的状态间进行切换。可以使用Transitions元素来定义状态之间的过渡效果，以及属性值的变化。可以使用StateChangeScript元素在状态切换时执行一些自定义的脚本逻辑。

总而言之，Qml states提供了一种机制，用于管理和切换UI元素的不同状态，以及在状态之间进行过渡和属性变化的控制。

2、transitions

在QML中，可以使用transitions属性来定义动画效果。transitions属性是Item类的一个属性，用于定义从一个状态到另一个状态之间的过渡效果。

transitions属性是一个列表，每个列表项代表一个过渡效果。每个过渡效果由一个Transition子类定义，可以通过定义不同的过渡属性和动画属性来实现不同的动画效果。

二、实际使用

下面通过一个红绿灯实例来了解使用方法，效果展示：

源码分享：

cpp 复制代码

import QtQuick

Window {
    width: 700
    height: 700
    visible: true
    title: qsTr("Hello World")

    Rectangle{
        width: 200
        height: 500
        anchors.centerIn: parent
        color: "gray"
        Column{
            anchors.fill: parent
            spacing: 5
            Rectangle{
                id: lampGo
                width: 200
                height: 200
                radius: 100
                color: "green"
            }
            Rectangle{
                id: lampStop
                width: 200
                height: 200
                radius: 100
                color: "black"
            }
        }
        states: [
            State {
                name:"go"
                PropertyChanges {
                    target: lampGo
                    color:"green"
                }
                PropertyChanges{
                    target: lampStop
                    color:"black"
                }
            },
            State {
                name:"stop"
                PropertyChanges {
                    target: lampGo
                    color:"black"
                }
                PropertyChanges{
                    target: lampStop
                    color:"red"
                }
            }
        ]
        transitions: [
            Transition {
                from: "go"
                to: "stop"
                PropertyAnimation{
                    property: "color"
                    duration: 500
                }
            },
            Transition {
                from: "stop"
                to: "go"
                PropertyAnimation{
                    property: "color"
                    duration: 500
                }
            }
        ]
        MouseArea{
            anchors.fill: parent
            onClicked: {
                parent.state = parent.state === 'stop' ? 'go' : 'stop'
                console.log("click")
            }
        }
    }

}