qml使用State和Transition

qml使用State和Transition

状态

state : string

Item当前状态，可直接赋值

root.state = "red_color";

states : list<State>

Item所有新增状态，Item默认状态空

states: [
            State {
                name: "red_color"
                PropertyChanges { target: root; color: "red" }
            },
            State {
                name: "blue_color"
                PropertyChanges { target: root; color: "blue" ; height : 240 }
            }
        ]

State

name:名称
when:何时切换到本状态
PropertyChanges ：改变对象属性

上述状态改变属性直接切换，下面添加动画效果

transitions

可以进行的动画列表

transitions: [
            Transition {
                from: "*"
                to:"red_color"
                ColorAnimation {  duration: 2000 }
            },
            Transition {
                from: "*"
                to:"blue_color"
//                SequentialAnimation
//                {
//                    NumberAnimation{ properties: "height" ;from :100;duration: 5000}
//                    ColorAnimation { from: "white"; duration: 2000 }
//                }

                ParallelAnimation{

                    NumberAnimation{ properties: "height" ;from :100;duration: 5000}
                    ColorAnimation { from: "white"; duration: 2000 }

                }
            }
        ]

Transition

from : 上个状态
to:当前状态
NumberAnimation：数字动画类型
ColorAnimation：颜色动画类型