QML-定时器

原文地址::https://blog.csdn.net/LiHong333/article/details/114592621?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-2.control&dist_request_id=1332030.9191.16190609708172425&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-2.control

相关文章

1、QML之Timer定时器----https://blog.csdn.net/DreamSonGO/article/details/72846409?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-4.control&dist_request_id=1332030.9191.16190609708172425&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-4.control

2、QML：Timer定时器使用----https://blog.csdn.net/mars_xiaolei/article/details/103043488

 

定时器
例子
Text {
    id: time
    width: 200
    height: 50
    color: "red"
    font.pixelSize: 26
}
Timer {
    interval: 50
    running: true
    repeat: true
    onTriggered: time.text = Date().toString()
}
1
2
3
4
5
6
7
8
9
10
11
12
13
定时50ms在text中显示当前时间

##练习题

Rectangle {
    id: lights
    anchors.top: time.bottom
    width: 110
    height: 320
    color: "black"

    Column {
        id: lightCol
        width: parent.width
        height: parent.height
        spacing: 5

        Rectangle {
            id: redlight
            x: 5
            y: 5
            width: 100
            height: 100
            radius: 100
            focus: true
            color: focus ? "red" : "gray"
        }
        Rectangle {
            id: yellowlight
            x: 5
            y: 110
            width: 100
            height: 100
            radius: 100
            color: focus ? "yellow" : "gray"
        }
        Rectangle {
            id: greenlight
            x: 5
            y: 215
            width: 100
            height: 100
            radius: 100
            color: focus ? "green" : "gray"
        }
    }
    states: [
        State {
            name: "redlightSta"
            PropertyChanges {
                target: redlight
                opacity: 1
                color: "red"
            }
            PropertyChanges {
                target: yellowlight
                opacity: 0
                color: "gray"
            }
            PropertyChanges {
                target: greenlight
                opacity: 0
                color: "gray"
            }
        },
        State {
            name: "yellowlightSta"
            PropertyChanges {
                target: redlight
                opacity: 0
                color: "gray"
            }
            PropertyChanges {
                target: yellowlight
                opacity: 1
                color: "yellow"
            }
            PropertyChanges {
                target: greenlight
                opacity: 0
                color: "green"
            }
        },
        State {
            name: "greenlightSta"
            PropertyChanges {
                target: redlight
                opacity: 0
                color: "gray"
            }
            PropertyChanges {
                target: yellowlight
                opacity: 0
                color: "gray"
            }
            PropertyChanges {
                target: greenlight
                opacity: 1
                color: "green"
            }
        }
    ]
    transitions: [
        Transition {
            from: "redlightSta"
            to: "yellowlightSta"
            PropertyAnimation {
                target: redlight
                properties: "color"
                duration: 2000
            }
        },
        Transition {
            from: "yellowlightSta"
            to: "greenlightSta"
            PropertyAnimation {
                target: yellowlight
                properties: "color"
                duration: 2000
            }
        },
        Transition {
            from: "greenlightSta"
            to: "redlightSta"
            PropertyAnimation {
                target: greenlight
                properties: "color"
                duration: 2000
            }
        }
    ]
}

Timer {
    interval: 5000
    running: true
    repeat: true
    onTriggered: {
        if(redlight.focus === true) {
            redlight.focus = false;
            yellowlight.focus = true;
            greenlight.focus = false;
            redlight.state = "yellowlightSta";
        }else if(yellowlight.focus === true) {
            redlight.focus = false;
            yellowlight.focus = false;
            greenlight.focus = true;
            redlight.state = "greenlightSta";
        }else if(greenlight.focus === true) {
            redlight.focus = true;
            yellowlight.focus = false;
            greenlight.focus = false;
            redlight.state = "redlightSta";
        }
    }
}
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
改善交通灯的过渡效果
Rectangle {
    id: lights
    anchors.top: time.bottom
    width: 110
    height: 320
    color: "black"

    Column {
        id: lightCol
        width: parent.width
        height: parent.height
        spacing: 5

        Rectangle {
            id: redlight
            x: 5
            y: 5
            width: 100
            height: 100
            radius: 100
            focus: true
            color: "red"
        }
        Rectangle {
            id: yellowlight
            x: 5
            y: 110
            width: 100
            height: 100
            radius: 100
            color: focus ? "yellow" : "gray"
        }
        Rectangle {
            id: greenlight
            x: 5
            y: 215
            width: 100
            height: 100
            radius: 100
            color: focus ? "green" : "gray"
        }
    }
    states: [
        State {
            name: "redlightSta"
            PropertyChanges {
                target: redlight
                color: "red"
                focus: true
            }
            PropertyChanges {
                target: yellowlight
                focus: false
                color: "gray"
            }
            PropertyChanges {
                target: greenlight
                focus: false
                color: "gray"
            }
        },
        State {
            name: "yellowlightSta"
            PropertyChanges {
                target: redlight
                focus: false
                color: "gray"
            }
            PropertyChanges {
                target: yellowlight
                focus: true
                color: "yellow"
            }
            PropertyChanges {
                target: greenlight
                focus: false
                color: "gray"
            }
        },
        State {
            name: "greenlightSta"
            PropertyChanges {
                target: redlight
                focus: false
                color: "gray"
            }
            PropertyChanges {
                target: yellowlight
                focus: false
                color: "gray"
            }
            PropertyChanges {
                target: greenlight
                focus: true
                color: "green"
            }
        }
    ]
    transitions: [
        Transition {
            from: "redlightSta"
            to: "yellowlightSta"
            PropertyAnimation {
                target: redlight
                properties: "color"
                duration: 5000
            }
        },
        Transition {
            from: "yellowlightSta"
            to: "greenlightSta"
            PropertyAnimation {
                target: yellowlight
                properties: "color"
                duration: 2000
            }
        },
        Transition {
            from: "greenlightSta"
            to: "redlightSta"
            PropertyAnimation {
                target: greenlight
                properties: "color"
                duration: 3000
            }
        }
    ]
    Timer {
        interval: 2000
        running: true
        repeat: true
        onTriggered: {
            if(redlight.focus) {
                parent.state = "yellowlightSta";
            }else if(yellowlight.focus) {
                parent.state = "greenlightSta";
            }else if(greenlight.focus) {
                parent.state = "redlightSta";
            }
        }
    }
}
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
效果图如下：

————————————————
版权声明：本文为CSDN博主「星空之神」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/LiHong333/article/details/114592621