QML系列教程(8)-状态State+属性变化PropertyChanges+when的用法

115 阅读 0 评论 76 点赞

我是靠谱客的博主醉熏酸奶，这篇文章主要介绍QML系列教程(8)-状态State+属性变化PropertyChanges+when的用法，现在分享给大家，希望可以做个参考。

何时使用这个状态。

所谓状态，就是某个或某些元素的一组属性值。我们可以定义一些状态，并在满足某些条件时，自由切换这些状态。

应用实例：

前面博文《QML系列教程(4)-自定义按钮》，当鼠标按下它之后，背景色会变；当鼠标弹起后，颜色会恢复。在那个例子的代码中，鼠标按下时，我们直接修改了它的背景色，弹起时，又修改了它的背景色。试想，如果你不仅想修改背景色，还想修改它的形状、边框粗细、边框颜色、旋转角度。。等等其他属性，那这段代码会看起来非常混乱。
如果你同时想修改多个元素的多个属性，那就更乱了。

针对这一应用场景，QML提供了一个好的解决方案，那就是定义状态。

使用中括号，定义多个状态的语法格式，例如：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    states: [
        State {
                name: "stat1";
                PropertyChanges { target: ele1; 其他属性} //定义元素ele[1]的各种属性
                PropertyChanges { target: ele2; 其他属性} //定义元素ele[2]的各种属性
                //....
                //PropertyChanges { target: elen; 其他属性} //定义元素ele[n]的各种属性
            }, //注意这里有个逗号
        State {
            name: "stat2";
            PropertyChanges { target: ele1; 其他属性} //定义元素ele1的各种属性
            PropertyChanges { target: ele2; 其他属性} //定义元素ele2的各种属性
        }
        //.....
        // 状态N
        //最后一个State后面不能有逗号。C语言数组中最后带个逗号没事，但是QML不允许
    ]

以设置属性的方式，设置状态，语法形如：(可用于整个界面的默认状态)

复制代码

1
state: "releaseStat"

以javascipt代码段的方式，设置状态，语法形如：

复制代码

1
root.state =  "pressStat"

编程示例：

在界面中显示一个矩形按钮和一段文字，当鼠标进入矩形时，按钮和文字都发生状态变化，鼠标移出时，按钮和文字也都发生状态变化。

复制代码

//本文件用来演示【状态】的用法
import QtQuick 2.0

Item {
    id: root
    width: 200
    height: width

Rectangle{
        id: btn
        height: 50
        width: 100
        color: "green"
        MouseArea {
            id: mouseArea
            hoverEnabled: true;
            anchors.fill: parent
            onEntered: {//鼠标进入瞬间
                console.log("enter");
                root.state =  "stat_in" //切换状态
            }
            onExited: {//鼠标滑出瞬间
                console.log("exit");
                root.state =  "stat_out" //切换状态
            }
        }
    }

Text{
        id: label
        height: 50
        width: 100
        color: "black"
        font.pixelSize: 30
        text: "初始文字"
        anchors.left: btn.right
        anchors.verticalCenter: btn.verticalCenter //文字垂直对齐到按钮
        anchors.leftMargin: 20 //左锚点距离
        verticalAlignment: Text.AlignVCenter //垂直居中
        horizontalAlignment: Text.AlignLeft //水平左对齐
    }

states: [
        State { // 状态1
                name: "stat_in";
                PropertyChanges { target: btn; color: "blue"; border.color: "green"; border.width: 5}
                PropertyChanges { target: label; color: "red"; text: "进入"}
            },
        State {// 状态2
            name: "stat_out";
            PropertyChanges { target: btn; color: "lightgreen"; border.color: "green"; border.width: 5}
            PropertyChanges { target: label; color: "black"; text: "退出"}
        }
    ] 
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
//本文件用来演示【状态】的用法
import QtQuick 2.0

Item {
    id: root
    width: 200
    height: width

    Rectangle{
        id: btn
        height: 50
        width: 100
        color: "green"
        MouseArea {
            id: mouseArea
            hoverEnabled: true;
            anchors.fill: parent
            onEntered: {//鼠标进入瞬间
                console.log("enter");
                root.state =  "stat_in" //切换状态
            }
            onExited: {//鼠标滑出瞬间
                console.log("exit");
                root.state =  "stat_out" //切换状态
            }
        }
    }

    Text{
        id: label
        height: 50
        width: 100
        color: "black"
        font.pixelSize: 30
        text: "初始文字"
        anchors.left: btn.right
        anchors.verticalCenter: btn.verticalCenter //文字垂直对齐到按钮
        anchors.leftMargin: 20 //左锚点距离
        verticalAlignment: Text.AlignVCenter //垂直居中
        horizontalAlignment: Text.AlignLeft //水平左对齐
    }

    states: [
        State { // 状态1
                name: "stat_in";
                PropertyChanges { target: btn; color: "blue"; border.color: "green"; border.width: 5}
                PropertyChanges { target: label; color: "red"; text: "进入"}
            },
        State {// 状态2
            name: "stat_out";
            PropertyChanges { target: btn; color: "lightgreen"; border.color: "green"; border.width: 5}
            PropertyChanges { target: label; color: "black"; text: "退出"}
        }
    ] 
}

在上述代码中，根据鼠标切换不同状态，使用了MouseArea的 onEntered槽函数和onExited槽函数，其实切换状态还有更便捷的方法，就是直接设置State的when属性，语法：

复制代码

1
2
3
4
5
6
State { // 状态定义
                name: "stat_in";
                when: 条件
                PropertyChanges { target: btn; color: "blue"; ......}
                .................
       },

当when的条件为true时，会切换为该状态，当false时，恢复为原状态（或者满足其他条件的状态）

把上述代码states部分修改为：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    states: [
        State { // 状态1
                name: "stat_in";
                when: mouseArea.pressed //当鼠标按下时
                PropertyChanges { target: btn; color: "blue"; border.color: "green"; border.width: 5}
                PropertyChanges { target: label; color: "red"; text: "进入"}
            },
        State {// 状态2
            name: "stat_out";
            when: !mouseArea.pressed //当鼠标弹起时
            PropertyChanges { target: btn; color: "lightgreen"; border.color: "green"; border.width: 5}
            PropertyChanges { target: label; color: "black"; text: "退出"}
        }
        //.....
        // 状态N
    ]