QML程序架构设计（二）状态机应用

     状态机刚使用，不太熟，如有错误，欢迎指出。

     在qml中的界面程序中，界面切换有的比较复杂，使用状态机则会清晰一点。在使用过程中，发现状态机的使用有讲究。

状态机使用1：

       对于同一个对象，要使用状态机改变他的状态，，需要放在该对象的内部，然后通过状态的切换，就可以改变器任意的属性，此时，状态的name是有用的，不同的name对应不同的状态。

import QtQuick 2.7import QtQuick.Controls 2.0import QtQuick.Layouts 1.0Rectangle {    visible: true    width: 640    height: 480    property int i:0    property int j:0    property int k:0    Rectangle    {        id:q1//        state:"w1"        width: 50        height: 50        color: "blue"        anchors{top:parent.top;left:parent.left}//        visible: j        visible: true        states: [            State {                name: "w1"                PropertyChanges{                    target:q1                    color:"red"                }//                when:{i%2 === 1}//                StateChangeScript{//                    name:"u1"//                    script: {//                        q1.visible = true//                        q2.visible = false//                        q1.color = "red"//                    }//                }            },            State{                name: "w2"                when:{i%2 === 0}                PropertyChanges{                    target:q1                    color:"blue"                }//                StateChangeScript{//                    name:"u2"//                    script: {//                        q1.visible = false//                        q2.visible = true//                        q2.color = "black"//                    }//                }            }        ]    }//    Rectangle//    {//        id:q2//        state:"w2"//        width: 50//        height: 50//        color: "blue"//        anchors{top:parent.top;left:parent.left;leftMargin: 50}//        visible: k//    }    MouseArea    {        anchors.fill: parent        onClicked:        {            i  += 1            if(i%2)            {                q1.state = "w1"            }            else            {                q1.state = "w2"            }            console.log(i%2)        }    }}

状态机使用2：

        如果要改变多个对象的状态，或者说多个对象之间进行状态的切换，则需要将state放在最外层，此时，不能使用name来进行状态切换，而要使用when的满足条件来进行触发；不可以使用ProperChange来改变不同的对象的属性，而要使用执行脚本StateChangeScript来进行状态的属性切换。

        如果脚本逻辑较复杂，还可以封函数进行调用。

import QtQuick 2.7import QtQuick.Controls 2.0import QtQuick.Layouts 1.0Rectangle {    visible: true    width: 640    height: 480    property int i:0    property int j:0    property int k:0    states: [        State {            name: "w1"            when:{i%2 === 1}            StateChangeScript{                name:"u1"                script: {                    q1.visible = true                    q2.visible = false                    q1.color = "red"                }            }        },        State{            name: "w2"            when:{i%2 === 0}            StateChangeScript{                name:"u2"                script: {                    q1.visible = false                    q2.visible = true                    q2.color = "black"                }            }        }    ]    Rectangle    {        id:q1        state:"w1"        width: 50        height: 50        color: "blue"        anchors{top:parent.top;left:parent.left}        visible: j    }    Rectangle    {        id:q2        state:"w2"        width: 50        height: 50        color: "blue"        anchors{top:parent.top;left:parent.left;leftMargin: 50}        visible: k    }    MouseArea    {        anchors.fill: parent        onClicked:        {            i  += 1            if(i%2)            {                q1.state = "w1"            }            else            {                q1.state = "w2"            }            console.log(i%2)        }    }}

         这样，方法二就可以应用在QML程序架构设计（一）中的第二中使用状态机的方法中了。但是这里还会存在一个隐患，当界面切套复杂，深层的子界面的id是很不好获取的。