QML中计时器的使用，实现一个简单的倒计时程序

最新推荐文章于 2025-05-11 12:43:39 发布

原创最新推荐文章于 2025-05-11 12:43:39 发布 · 5.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#QT #QML

本文介绍如何在QML中使用计时器创建一个简单的倒计时程序，参考自《Qt Quick核心编程》。通过示例代码展示QML计时器的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

还是要说明，我是看QMLBook和Qt Quick核心编程这两本书边学边写的。所以以下代码尽管有所改动，但是仍旧应该是有版权的，来自Qt Quick核心编程这本书。

import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    visible: true
    Rectangle{
        id:gray
        width: 100
        height: 100
        color: "gray"
        anchors.centerIn: parent
        QtObject{
            id:attr
            property int counter;
            Component.onCompleted: {
                counter=10
            }
        }
    }
    Text {
        id: countshow
        anchors.centerIn: parent
        color: "blue"
        font.pixelSize: 40
    }
    Timer{
        id:countdown
        interval: 1000
        repeat: true
        triggeredOnStart: true//这一设置保证了立即触发，如果没有，你会发现有延迟
        onTriggered: {
            countshow.text=attr.counter
            attr.counter-=1;
            if(attr.counter<0)
            {
                countdown.stop()
                countshow.text="开始啦"
            }
        }
    }
    Button{
        id:startBtn
        text: "开始"
        anchors.top: gray.bottom
        anchors.horizontalCenter: gray.horizontalCenter
        onClicked:  {
            attr.counter=10
            countdown.start()
        }
    }
}

效果图；

貌似没有什么复杂的地方。