27.Qt Quick QML-State、Transition

1.State
所有组件均具有默认状态，该状态定义对象和属性值的默认配置。可以通过向States属性添加State组件来定义新状态，以允许组件在不同配置之间切换.
许多用户界面设计都是由State状态实现的,比如: 交通信号将根据其State配置来实现红黄绿灯交错亮灭.
在QML中，状态是在State对象中定义的一组属性配置。例如，下面几种用State状态最为方便:

• 只显示某些UI组件，隐藏其他组件
• 向用户展示不同的可用操作
• 启动、停止或暂停动画
• 更改特定Item的属性值
• 显示不同的视图或screen

所有基于Item的对象都有一个states属性和state属性:

• tates属性 : list<State>类型,用来保存多个不同State对象的列表.
• state属性 : string类型,用来保存对象当前State对象的名称(表示当前状态是什么样子的),默认是一个空字符串,如果要改变Item对象当前状态,则将state属性设置为要改变的状态name名称即可.

对于非Item对象可以通过StateGroup组件配合来使用State即可

1.1 State对象属性

• name : string,状态名称。,每个状态在都应具有唯一的名称
• changes : list<Change>,保存当前State下的多个Change对象,比如PropertyChanges、StateChangeScript、ParentChange等
• extend : string,扩展,表示该状态要在哪个State的基础上进行扩展,当一个状态要在另一个状态基础上进行扩展时，它将继承该另一个状态的所有changes
• when : bool,当什么时候启动状态,默认值为false,比如:when: mouseArea.pressed,表示当有鼠标按下则启动该状态.

1.2 Change对象

当一个对象的状态发生改变,那么该对象展示给用户的效果也会相应发生改变,所以State支持了多个不同Change对象供我们使用,有如下几种:

• PropertyChanges: 改变对象的属性值
• StateChangeScript:运行脚本,比如function函数
• ParentChange: 改变对象的父类对象.并且改变对象在父类对象下的坐标xy,宽高等属性
• AnchorChanges: 改变对象的anchor值

由于帮助手册都有很多示例,所以我们以PropertyChanges为例,来实现一个交通灯

1.3 交通灯示例

我们以交通信号为例,根据其State配置来实现红黄绿灯交错亮灭.效果如下所示:

代码如下所示:

Window {
    width: 300;
    height: 400;
    visible: true;
    property var delayCnt: 0

    Rectangle {
        anchors.fill: parent
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#14148c" }
            GradientStop { position: 0.699; color: "#14aaff" }
            GradientStop { position: 0.7; color: "#80c342" }
            GradientStop { position: 1.0; color: "#006325" }
        }
    }

    Canvas {
        id: canvas
        anchors.centerIn: parent
        width: 80
        height: 300
        onPaint: {
            var ctx = getContext("2d")
            ctx.fillStyle = "black"
            ctx.fillRect(0,0,width,height-90)
            ctx.fillRect(width/2 -15,height-90,30,90)
        }
    }

    Column {
        id: leds
        anchors.centerIn: canvas
        anchors.verticalCenterOffset: -45
        spacing: 15
        state: delayCnt < 5 ? "red" :
               delayCnt < 10 ? "green" :
               delayCnt < 14 ? (delayCnt%2==0 ? "green" : "") :
               "yellow";

        Rectangle {
            id : redLed
            width: 50; height:50
            radius: width/2
            color: "red"
            opacity: 0.2
        }
        Rectangle {
            id : yellowLed
            width: 50; height:50
            radius: width/2
            color: "yellow"
            opacity: 0.2
        }
        Rectangle {
            id : greenLed
            width: 50; height:50
            radius: width/2
            color: "green"
            opacity: 0.2
        }

        states: [
            State {
                name: "red"
                PropertyChanges { target: redLed; opacity: 1}
            },
            State {
                name: "yellow"
                PropertyChanges { target: yellowLed; opacity: 1}
            },
            State {
                name: "green"
                PropertyChanges { target: greenLed; opacity: 1}
            }
        ]
    }
    Timer {
        interval: 500
        repeat: true
        running: true
        onTriggered: {
            delayCnt = (delayCnt+1)%18
            console.log(delayCnt,leds.state)
        }
    }
}