QML QML 状态

Posted 2020-07-31 Dkma像疯子一样战斗

       用户界面用来显示不同场景中的界面，或者是改变它们的外观来相应用户的交互。通常情况下，由一些列变化是并发进行的。Qt帮助中查看QML States关键字。状态属性states.

1 创建状态

  要创建一个状态，可以向项目的states属性添加一个State对象，states属性包含了该项目状态的列表。

 Rectangle{
        id:window
        width:240; height:150
        color:"red"

        MouseArea{
        anchors.fill: parent
        onClicked:window.state = "moved"
        }

        states:[
        State{
            name:"moved"
            PropertyChanges {
                target: window
                x:50;y:50;
            }}
        ]
    }

　　上述例子中Rectangle默认在（0 0）位置，附加一个moved状态，使用PropertyChanges对象将矩形的位置更改为了（50 50）。单击就能改变状态。 State项目定义了在新状态中要进行的所有改变，可以指定改变的附加属性，或者为其他属相创建附加的PropertyChanges，也可以修改其他对象的属性，而不仅仅是拥有状态的对象。

 

2 默认状态

   使用States项目可以批量处理属相的变化。除此之外还可以直接恢复到项目默认状态。使用when来回到原来状态。

    Rectangle{
        id:window
        width:240; height:150
        color:"red"

        MouseArea{
            id:moouseArea
        anchors.fill: parent

        }

        states:[
        State{
            name:"moved";
            when:moouseArea.pressed
            PropertyChanges {
                target: window
                x:50;y:50;
            }}
        ]
    }
}

　　原来使用onClicked()信号处理器，调用状态切换。现在使用when属性来实现，回到默认状态。也可以直接设置属性值。

    Rectangle{
        id:window
        width:240; height:150
        color:"red"

        MouseArea{
            id:moouseArea
        anchors.fill: parent
        onPressed: window.state = "moved";
        onReleased: window.state = "";

        }
        states:[
        State{
            name:"moved";
            PropertyChanges {
                target: window
                x:50;y:50;
            }}
        ]
    }
}

　　使用when属性比使用信号处理器来分配状态更加简单，更符合声明式的语言，建议使用when属性的方法。