前言这一节我们来讲一下区别于鼠标键盘事件的定时器事件,它不需要用户操作,由系统自动发出。定时器可以用来触发一个动作,一次或在给定的时间间隔内重复触发。定时器的属性和方法定时器的属性
定时器的信号定时器只有一个信号——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 |