Qt Qucik开发案例：时钟

一个QML时钟应用程序，它演示了使用ListView类型来显示ListModel生成的数据，以及使用SpringAnimation类型来制作图像动画。

Clocks演示了使用ListView类型来显示ListModel生成的数据。模型所使用的委托人被指定为自定义的QML类型，该类型在Clock.qml文件中被指定。

JavaScript方法被用来获取不同时区的几个城市的当前时间，QML类型被用来在钟面上用动画时钟指针显示时间。

运行示例

要从Qt Creator中运行该示例，请打开欢迎模式并从示例中选择该示例。如需了解更多信息，请访问构建和运行示例。

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

在clocks.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: Content.Clock { city: cityName; shift: timeShift }        model: ListModel {            ListElement { cityName: "New York"; timeShift: -4 }            ListElement { cityName: "London"; timeShift: 0 }            ListElement { cityName: "Oslo"; timeShift: 1 }            ListElement { cityName: "Mumbai"; timeShift: 5.5 }            ListElement { cityName: "Tokyo"; timeShift: 9 }            ListElement { cityName: "Brisbane"; timeShift: 10 }            ListElement { cityName: "Los Angeles"; timeShift: -8 }        }    }

列表元素的定义与其他QML类型一样，只是它们包含角色定义而不是属性的集合。角色既定义如何访问数据，又包括数据本身。

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

时钟自定义类型被用作ListView中的delegate，定义的列表项目的视觉外观。要使用Clock类型，我们添加了一条import语句，用于导入名为content类型所在位置的文件夹：

import "content" as Content

我们使用图像类型显示箭头，以指示用户是否可以轻拂视图以在左侧或右侧看到更多时钟：

 Image {        anchors.left: parent.left        anchors.bottom: parent.bottom        anchors.margins: 10        source: "content/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: "content/arrow.png"        rotation: 90        opacity: clockview.atXEnd 0 : 0.5        Behavior on opacity { NumberAnimation { duration: 500 } }    }}

opacity当列表视图位于x轴的起点或终点时，我们使用该属性隐藏箭头。

在Clock.qml中，我们定义了一个timeChanged()函数，其中我们使用JavaScriptDate对象中的方法来获取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 {        anchors.centerIn: parent        width: 200; height: 240        Image { id: background; source: "clock.png"; visible: clock.night == false }        Image { source: "clock-night.png"; visible: clock.night == true }

应用于图像类型的旋转变换提供了一种旋转时钟指针的方法。原点属性持有相对于父点固定的点，当项目的其余部分旋转时。角度属性决定了以顺时针为单位旋转指针的角度。

Image {            x: 92.5; y: 27            source: "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: "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: "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: "center.png"        }

当时间更改时，我们在属性上使用行为类型angle来应用SpringAnimation。的spring和damping特性使所述时钟指针的弹簧状运动，和一个modulus的360使动画目标值环绕在一个完整的圆。

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

 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"        }

Qt常用组件：

• QtitanRibbon| 下载试用: 遵循Microsoft Ribbon UI Paradigm for Qt技术的Ribbon UI组件，致力于为Windows、Linux和Mac OS X提供功能完整的Ribbon组件。
• QtitanChart | 下载试用 :是一个C ++库，代表一组控件，这些控件使您可以快速地为应用程序提供漂亮而丰富的图表。并且支持所有主要的桌面操作系统。
• QtitanDataGrid | 下载试用 :这个Qt数据 格组件使用纯C++创建，运行速度极快，处理大数据和超大数据集的效果突出。QtitanDataGrid完全集成了QtDesigner，因而极易适应其他相似的开发环境，保证100%兼容Qt GUI。

标签：