一、效果展示

　　效果如图1所示，时钟列表支持鼠标左右拖动，带有黑色背景的是晚上时钟，无黑色背景的是白天时钟

 

二、源码分析

1、main.cpp文件中只包含了一个宏，该宏的具体解释请看文章

2、时钟项

1 Item {  2     id : clock  3     width: {  4         if (ListView.view && ListView.view.width >= 200)  5             return ListView.view.width / Math.floor(ListView.view.width / 200.0);  6         else  7             return 200;  8     }  9  10     height: { 11         if (ListView.view && ListView.view.height >= 240) 12             return ListView.view.height; 13         else 14             return 240; 15     } 16  17     property alias city: cityLabel.text//属性别名，方便在外部使用 18     property int hours//自定义属性 19     property int minutes 20     property int seconds 21     property real shift 22     property bool night: false//是否是晚上  来决定是否显示黑色实心圈 23     property bool internationalTime: true //Unset for local time 24  25     //js函数 26     function timeChanged() { 27         var date = new Date; 28         hours = internationalTime ? date.getUTCHours() + Math.floor(clock.shift) : date.getHours() 29         night = ( hours < 7 || hours > 19 ) 30         minutes = internationalTime ? date.getUTCMinutes() + ((clock.shift % 1) * 60) : date.getMinutes() 31         seconds = date.getUTCSeconds(); 32     } 33  34     Timer { 35         interval: 100; running: true; repeat: true;//一个每隔100ms重复执行的定时器，默认启动 36         onTriggered: clock.timeChanged()//定时器槽函数 37     } 38  39     Item { 40         anchors.centerIn: parent 41         width: 200; height: 240 42          43         Image { id: background; source: "clock.png"; visible: clock.night == false }//最外层白色圈 44         Image { source: "clock-night.png"; visible: clock.night == true }//黑色实心圈，带有白色实心圆球的刻度点    45  46         //时针 47         Image { 48             x: 92.5; y: 27 49             source: "hour.png" 50             transform: Rotation { 51                 id: hourRotation 52                 origin.x: 7.5; origin.y: 73; 53                 angle: (clock.hours * 30) + (clock.minutes * 0.5) 54                 Behavior on angle { 55                     SpringAnimation { spring: 2; damping: 0.2; modulus: 360 } 56                 } 57             } 58         } 59  60         //分针 61         Image { 62             x: 93.5; y: 17 63             source: "minute.png" 64             transform: Rotation { 65                 id: minuteRotation 66                 origin.x: 6.5; origin.y: 83; 67                 angle: clock.minutes * 6 68                 Behavior on angle { 69                     SpringAnimation { spring: 2; damping: 0.2; modulus: 360 } 70                 } 71             } 72         } 73  74         //秒针 75         Image { 76             x: 97.5; y: 20 77             source: "second.png" 78             transform: Rotation { 79                 id: secondRotation 80                 origin.x: 2.5; origin.y: 80; 81                 angle: clock.seconds * 6 82                 Behavior on angle { 83                     SpringAnimation { spring: 2; damping: 0.2; modulus: 360 } 84                 } 85             } 86         } 87         //中心白色圆圈 88         Image { 89             anchors.centerIn: background; source: "center.png" 90         } 91  92         Text { 93             id: cityLabel//该属性已经被导出，在clocks.qml文件中指定该属性值 94             y: 210; anchors.horizontalCenter: parent.horizontalCenter 95             color: "white" 96             font.family: "Helvetica" 97             font.bold: true; font.pixelSize: 16 98             style: Text.Raised; styleColor: "black" 99         }100     }101 }

3、时钟列表

1 import "content" as Content  //导入目录  该目录底下的所有qml自定义控件均可以直接使用 2  3 Rectangle { 4     id: root 5     width: 640; height: 320 6     color: "#646464" 7  8     ListView {
   //列表视图 9         id: clockview//唯一id10         anchors.fill: parent//填充整个父窗口11         orientation: ListView.Horizontal//列表朝向为水平方向12         cacheBuffer: 2000//左右2000个像素以内的委托项都不会被析构13         snapMode: ListView.SnapOneItem//拖拽模式14         highlightRangeMode: ListView.ApplyRange//高亮模式，高亮尽可能在可是区间内15 16         delegate: Content.Clock { city: cityName; shift: timeShift }//设置Clock控件的导出属性值17         model: ListModel {
   //静态model18             ListElement { cityName: "New York"; timeShift: -4 }19             ListElement { cityName: "London"; timeShift: 0 }20             ListElement { cityName: "Oslo"; timeShift: 1 }21             ListElement { cityName: "Mumbai"; timeShift: 5.5 }22             ListElement { cityName: "Tokyo"; timeShift: 9 }23             ListElement { cityName: "Brisbane"; timeShift: 10 }24             ListElement { cityName: "Los Angeles"; timeShift: -8 }25         }26     }27     //左下角上一个箭头28     Image {29         anchors.left: parent.left30         anchors.bottom: parent.bottom31         anchors.margins: 1032         source: "content/arrow.png"33         rotation: -9034         opacity: clockview.atXBeginning ? 0 : 0.5//当视图滚动到第一个时透明度为0(使用行为动画)35         Behavior on opacity { NumberAnimation { duration: 500 } }//在透明度属性上添加动画(数字动画)36     }37     //右下角下一个箭头38     Image {39         anchors.right: parent.right40         anchors.bottom: parent.bottom41         anchors.margins: 1042         source: "content/arrow.png"43         rotation: 9044         opacity: clockview.atXEnd ? 0 : 0.545         Behavior on opacity { NumberAnimation { duration: 500 } }46     }47 }