QT Quick QML 之 states和transitions介绍

1. 运行结果

老规矩，先看运行效果，共有三种状态“左边”、“中间”和“右边”，左边到中间200ms，中间到右边500ms，右边到左边1000ms。

2. 代码

import QtQuick 2.7
import QtQuick.Controls 2.0

ApplicationWindow{
    visible: true
    width: 300
    height: 200
    title: qsTr("三开开关");

    //整个横条
    Rectangle {
        id: rct
        anchors.centerIn: parent
        height: 30
        width: 120
        color: "gray"               //底层灰色
        radius: height/2;

        property var _strs:  ["左边", "中间", "右边"];

        //横条里的小滑块
        Rectangle {
            id: slider
            width: parent.width * 0.33
            radius: parent.radius
            color: (slider.state == "") ? "red" : ((slider.state == "middle")? "green": "blue")
            anchors {
                top: parent.top
                bottom: parent.bottom
            }
            
			///● state和states
            state: "right"     //初始状态在右边
            states: [          //状态列表 有三种状态可选
                //空字节，"left"
                //也可以只给一个名字如下：
                //State { name: "left" },
                State {
                    name: "middle"
                    PropertyChanges {
                        target: slider
                        x: slider.width//   1/3
                    }
                },
                State {
                    name: "right"
                    PropertyChanges {
                        target: slider
                        x: slider.width*2//  2/3
                    }
                }
            ]

            ///● transitions 转换
            transitions: [
                //"" 状态 ——> "middle" 状态  200ms
                Transition {
                    from: "";   to: "middle";
                    NumberAnimation{  properties: "x" ;  duration:200  }
                },
                //"middle" 状态  ——> "right" 状态   500ms
                Transition {
                    from: "middle";to: "right";
                    NumberAnimation{properties: "x";     duration:500}
                },
                //"其它" 状态  ——> "其它" 状态       1000ms
                Transition {
                    from: "*";    to: "*";
                    NumberAnimation{properties: "x";     duration:1000}
                }
            ]

            Text {
                anchors.centerIn: parent
                text: slider.state == "" ? rct._strs[0] : (slider.state == "middle"? rct._strs[1] : rct._strs[2]);
                color: "white"
                font.pointSize: 10
            }
        }
    }

    MouseArea {
        anchors.fill: rct;
        onPressed: {
            if(slider.state == ""){
                slider.state = "middle";
            }
            else if(slider.state == "middle"){
                slider.state = "right";
            }
            else{
                slider.state = "";
            }
        }
    }
}

3. 关键词详解

● state和states

state和states一般搭配使用，别说qml的状态了，我们人也都是有状态的，今天状态好的话，工作效率高，吃啥啥香，看啥啥顺眼；状态差的话，犯困，被项目经理叼。这 “好” 状态和 “坏” 状态就分别对应了state的两种选择。 “工作效率高，吃啥啥香，看啥啥顺眼” 就是states的一组状态哈。

state可用来指定states的状态之一, 没有指定则为默认状态，为空字符串，同样，通过将此属性设置为空字符串，可以将项返回到其默认状态。上面实例有说明。states 就是多组状态信息，而在转换过程中可以指定transitions(转变)信息。

● transitions:

一系列的过渡能够被加入任何元素，一个过渡由状态的改变触发执行。你可以使用属性的from:和to:来定义状态改变的指定过渡。
这两个属性就像一个过滤器，当过滤器为true时，过渡生效。你也可以使用“”来表示任何状态。例如from:”“; to:”” 表示从任一状态到另一个任一状态的默认值，这意味着过渡用于每个状态的切换。

参考链接：QML进阶教程：四、状态（States）和过渡（Transitions）

● 我的QT QUICK QML学习过程总结：

QT Quick QML入门笔记（一）应用程序结构分析和QML基础

QT Quick QML入门笔记（二）信号与槽

QT Quick QML入门笔记（三）常见元素

QT Quick QML入门笔记（四）锚(anchors)布局

QT Quick QML入门笔记（五）处理鼠标和键盘事件

QT Quick QML 事件处理——定时器

QT Quick QML 动画——SpringAnimation弹簧动画和Behavior

Qt Quick Qml 之QML与C++ 混合编程学习

QT Quick QML 布局——定位置布局(Row、Column、Grid、Flow和Repeater)

QT Quick Qml 之property alias别名使用(Column和Repeater升级版本)

QT Quick Qml 实例——滑块拖动颜色框的平移(Gradient、drag、clip、transform)

● 推荐看看安神的QT Quick专栏：Qt Quick简明教程