前言这一节我们来讲一下区别于鼠标键盘事件的定时器事件,它不需要用户操作,由系统自动发出。定时器可以用来触发一个动作,一次或在给定的时间间隔内重复触发。定时器的属性和方法定时器的属性
定时器的信号定时器只有一个信号——triggered() 定时器被触发后,对应的处理程序为onTriggered() 定时器的方法
例程练习看完了定时器的属性和方法,是不是觉得超级简单!接下来我们用两个例程分别来学习一下它的属性和方法的使用。第一个例程实现的效果是小矩形在大矩形内沿横向循环流动,首先做一下两个矩形的嵌套,相信大家已经很熟悉了。 Window {
visible: true
width: 450
height: 480
title: qsTr("timer")
Rectangle{
id: rect
anchors.fill: parent
color: "green"
Rectangle{
id:rect1
x:0
y:0
width: 50
height: 480
color:"orange"
}
}
}然后开始定义定时器,设置其属性。 Timer{
id: time
interval: 1000
repeat: true
running: true
onTriggered: {
if(rect1.x + rect1.width < rect.width)
{
rect1.x += 50
}else{
rect1.x = 0;
}
}
}设置时间间隔interval为1000ms,即1s触发一次。既然是循环流动,则需要设置repeat为重复触发。因为我们没有其他的控件在窗口上,所以设置running为true,triggeredOnStart默认为false,使程序一启动就开始触发。然后在触发处理函数中进行判断,只要是小矩形移动到大矩形的末尾,就算一次循环结束,小矩形回到起点,重复的进行流动。 看一下效果: 再来看一下第二个小程序,大家应该对手机上的计时器都不陌生,那么我们就实现一个简易的定时器,看一下定时器的方法是如何使用的。注释掉上述代码或者新建一个工程。输入以下代码: Text {
id: text
anchors.centerIn: parent
color: "red"
text: "10"
font.pixelSize: 50
property int num: 10
}
Timer{
id: time
interval: 1000
repeat: true
triggeredOnStart: true
onTriggered: {
text.text = text.num
text.num--
if(text.num < 0)
{
time.stop()
text.text = "计时结束"
}
}
}
Button{
id:start
anchors.top: text.bottom
anchors.topMargin: 100
x:170
text: "start"
onClicked: {
time.start()
}
}
Button{
id:restart
anchors.top: text.bottom
anchors.topMargin: 100
anchors.left: start.right
anchors.leftMargin: 10
text: "restart"
onClicked: {
time.start()
text.num = 10
}
}
Button{
id:stop
anchors.top: text.bottom
anchors.topMargin: 100
anchors.left: restart.right
anchors.leftMargin: 10
text: "stop"
onClicked: {
time.stop()
}
}内容很简单,窗口部分就是一个Text和三个Button控件。在Text对象中自定义了一个属性num,用来记录当前的计数值。定义定时器,时间间隔为1s,在其信号处理函数中设置Text的值为当前的计数值,且1s递减一次。当num减到0时,代表计数结束,定时器随之停止。 三个按钮的作用是在onClicked函数中分别调用time的方法,实现开启、重置和停止定时器。效果如下: 总结源码:11.zip |