- 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
- }
来源: