Back to Qt.io
Contact Us Blog Download Qt
本页内容

Qt Quick 示例 - 时钟

这是一个 QML 时钟应用程序，演示了如何使用 `ListView ` 类型来显示由 `ListModel ` 生成的数据，以及如何使用 `SpringAnimation ` 类型来对图像进行动画处理。

三只模拟时钟，分别显示奥斯陆、孟买和东京的时间

“时钟”演示了如何使用ListView 类型来显示由ListModel 生成的数据。模型所使用的委托被指定为一个自定义的QML类型，该类型在Clock.qml文件中进行了定义。

通过 JavaScript 方法获取不同时区多个城市的当前时间，并使用 QML 类型在时钟表盘上显示时间，同时配合动画时针进行展示。

运行示例

您可以通过以下方式运行示例：

显示由列表模型生成的数据

在 Main.qml 文件中，我们使用Rectangle 类型来创建应用程序的主窗口：

Rectangle {
    id: root
    width: 640; height: 320
    color: "#646464"

我们使用ListView 类型来显示由ListModel 类型提供的项目列表：

    ListView {
        id: clockview
        anchors.fill: parent
        orientation: ListView.Horizontal
        cacheBuffer: 2000
        snapMode: ListView.SnapOneItem
        highlightRangeMode: ListView.ApplyRange

        delegate: Clock {
            required city
            required shift
        }
        model: ListModel {
            ListElement { city: "New York"; shift: -4 }
            ListElement { city: "London"; shift: 0 }
            ListElement { city: "Oslo"; shift: 1 }
            ListElement { city: "Mumbai"; shift: 5.5 }
            ListElement { city: "Tokyo"; shift: 9 }
            ListElement { city: "Brisbane"; shift: 10 }
            ListElement { city: "Los Angeles"; shift: -8 }
        }
    }

列表元素的定义方式与其他 QML 类型类似，不同之处在于它们包含一组角色定义，而非属性。角色既定义了数据的访问方式，也包含数据本身。

对于每个列表项，我们使用cityName 角色来指定城市名称，并使用timeShift 角色来指定时区（以相对于协调世界时（UTC）的正负偏移量表示）。

“Clock”自定义类型用作ListView 的delegate ，用于定义列表项的视觉外观。

我们使用Image类型来显示箭头，这些箭头用于指示用户是否可以通过轻扫视图来查看左侧或右侧的更多时钟：

    Image {
        anchors.left: parent.left
        anchors.bottom: parent.bottom
        anchors.margins: 10
        source: "images/arrow.png"
        rotation: -90
        opacity: clockview.atXBeginning ? 0 : 0.5
        Behavior on opacity { NumberAnimation { duration: 500 } }
    }

    Image {
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.margins: 10
        source: "images/arrow.png"
        rotation: 90
        opacity: clockview.atXEnd ? 0 : 0.5
        Behavior on opacity { NumberAnimation { duration: 500 } }
    }
}

当列表视图位于 x 轴的起始或末端时，我们使用 `opacity ` 属性来隐藏这些箭头。

在 Clock.qml 中，我们定义了一个 `timeChanged() ` 函数，其中使用 JavaScript `Date ` 对象的方法获取当前的 UTC 时间，并将其调整为正确的时区：

    function timeChanged() {
        var date = new Date;
        hours = internationalTime ? date.getUTCHours() + Math.floor(clock.shift) : date.getHours()
        night = ( hours < 7 || hours > 19 )
        minutes = internationalTime ? date.getUTCMinutes() + ((clock.shift % 1) * 60) : date.getMinutes()
        seconds = date.getUTCSeconds();
    }

我们使用Timer 类型以100毫秒为间隔更新时间：

    Timer {
        interval: 100; running: true; repeat: true;
        onTriggered: clock.timeChanged()
    }

我们在Item 类型中使用Image类型，将时间显示在模拟时钟表盘上。白天和夜间使用不同的图像：

    Item {
        anchors.centerIn: parent
        width: 200; height: 240

        Image { id: background; source: "images/clock.png"; visible: clock.night == false }
        Image { source: "images/clock-night.png"; visible: clock.night == true }

对Image类型应用Rotation 转换可实现时针和分针的旋转。origin 属性保存了一个相对于父项保持固定的点，当项目其余部分旋转时，该点位置不变。angle 属性以度为单位确定时针和分针顺时针旋转的角度。

        Image {
            x: 92.5; y: 27
            source: "images/hour.png"
            transform: Rotation {
                id: hourRotation
                origin.x: 7.5; origin.y: 73;
                angle: (clock.hours * 30) + (clock.minutes * 0.5)
                Behavior on angle {
                    SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
                }
            }
        }

        Image {
            x: 93.5; y: 17
            source: "images/minute.png"
            transform: Rotation {
                id: minuteRotation
                origin.x: 6.5; origin.y: 83;
                angle: clock.minutes * 6
                Behavior on angle {
                    SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
                }
            }
        }

        Image {
            x: 97.5; y: 20
            source: "images/second.png"
            transform: Rotation {
                id: secondRotation
                origin.x: 2.5; origin.y: 80;
                angle: clock.seconds * 6
                Behavior on angle {
                    SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
                }
            }
        }

        Image {
            anchors.centerIn: background; source: "images/center.png"
        }

我们在angle 属性上使用Behavior 类型，以便在时间变化时应用SpringAnimation 。spring 和damping 属性使时针和分针呈现出类似弹簧的运动效果，而modulus 设置为360 ，则使动画目标值在完成一整圈后循环重置。

我们使用Text 类型在时钟下方显示城市名称：

        Text {
            id: cityLabel
            y: 210; anchors.horizontalCenter: parent.horizontalCenter
            color: "white"
            font.family: "Helvetica"
            font.bold: true; font.pixelSize: 16
            style: Text.Raised; styleColor: "black"
            text: clock.city
        }

示例项目 @ code.qt.io

另请参阅 QML 应用程序。

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.