Chinaunix首页 | 论坛 | 博客
  • 博客访问: 971737
  • 博文数量: 192
  • 博客积分: 3070
  • 博客等级: 中校
  • 技术积分: 1861
  • 用 户 组: 普通用户
  • 注册时间: 2007-06-27 23:44
个人简介

Start Linux Leave Linux a while Back to Linux

文章分类

全部博文(192)

文章存档

2023年(18)

2022年(11)

2021年(8)

2020年(14)

2019年(7)

2018年(13)

2017年(16)

2016年(4)

2012年(2)

2011年(13)

2010年(26)

2009年(13)

2008年(27)

2007年(20)

我的朋友

分类: Android平台

2017-03-06 10:01:38

原文:http://www.cnblogs.com/swarmbees/p/6344837.html

一、效果展示

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

 

二、源码分析

1、main.cpp文件中只包含了一个宏,该宏的具体解释请看qml 示例中的关键宏文章

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.     height: {
  10.         if (ListView.view && ListView.view.height >= 240)
  11.             return ListView.view.height;
  12.         else
  13.             return 240;
  14.     }

  15.     property alias city: cityLabel.text//属性别名,方便在外部使用
  16.     property int hours//自定义属性
  17.     property int minutes
  18.     property int seconds
  19.     property real shift
  20.     property bool night: false//是否是晚上 来决定是否显示黑色实心圈
  21.     property bool internationalTime: true //Unset for local time

  22.     //js函数
  23.     function timeChanged() {
  24.         var date = new Date;
  25.         hours = internationalTime ? date.getUTCHours() + Math.floor(clock.shift) : date.getHours()
  26.         night = ( hours < 7 || hours > 19 )
  27.         minutes = internationalTime ? date.getUTCMinutes() + ((clock.shift % 1) * 60) : date.getMinutes()
  28.         seconds = date.getUTCSeconds();
  29.     }

  30.     Timer {
  31.         interval: 100; running: true; repeat: true;//一个每隔100ms重复执行的定时器,默认启动
  32.         onTriggered: clock.timeChanged()//定时器槽函数
  33.     }

  34.     Item {
  35.         anchors.centerIn: parent
  36.         width: 200; height: 240
  37.         
  38.         Image { id: background; source: "clock.png"; visible: clock.night == false }//最外层白色圈
  39.         Image { source: "clock-night.png"; visible: clock.night == true }//黑色实心圈,带有白色实心圆球的刻度点

  40.         //时针
  41.         Image {
  42.             x: 92.5; y: 27
  43.             source: "hour.png"
  44.             transform: Rotation {
  45.                 id: hourRotation
  46.                 origin.x: 7.5; origin.y: 73;
  47.                 angle: (clock.hours * 30) + (clock.minutes * 0.5)
  48.                 Behavior on angle {
  49.                     SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
  50.                 }
  51.             }
  52.         }

  53.         //分针
  54.         Image {
  55.             x: 93.5; y: 17
  56.             source: "minute.png"
  57.             transform: Rotation {
  58.                 id: minuteRotation
  59.                 origin.x: 6.5; origin.y: 83;
  60.                 angle: clock.minutes * 6
  61.                 Behavior on angle {
  62.                     SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
  63.                 }
  64.             }
  65.         }

  66.         //秒针
  67.         Image {
  68.             x: 97.5; y: 20
  69.             source: "second.png"
  70.             transform: Rotation {
  71.                 id: secondRotation
  72.                 origin.x: 2.5; origin.y: 80;
  73.                 angle: clock.seconds * 6
  74.                 Behavior on angle {
  75.                     SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
  76.                 }
  77.             }
  78.         }
  79.         //中心白色圆圈
  80.         Image {
  81.             anchors.centerIn: background; source: "center.png"
  82.         }

  83.         Text {
  84.             id: cityLabel//该属性已经被导出,在clocks.qml文件中指定该属性值
  85.             y: 210; anchors.horizontalCenter: parent.horizontalCenter
  86.             color: "white"
  87.             font.family: "Helvetica"
  88.             font.bold: true; font.pixelSize: 16
  89.             style: Text.Raised; styleColor: "black"
  90.         }
  91.     }
  92. }

3、时钟列表

点击(此处)折叠或打开

  1. import "content" as Content //导入目录 该目录底下的所有qml自定义控件均可以直接使用

  2. Rectangle {
  3.     id: root
  4.     width: 640; height: 320
  5.     color: "#646464"

  6.     ListView {//列表视图
  7.         id: clockview//唯一id
  8.         anchors.fill: parent//填充整个父窗口
  9.         orientation: ListView.Horizontal//列表朝向为水平方向
  10.         cacheBuffer: 2000//左右2000个像素以内的委托项都不会被析构
  11.         snapMode: ListView.SnapOneItem//拖拽模式
  12.         highlightRangeMode: ListView.ApplyRange//高亮模式,高亮尽可能在可是区间内

  13.         delegate: Content.Clock { city: cityName; shift: timeShift }//设置Clock控件的导出属性值
  14.         model: ListModel {//静态model
  15.             ListElement { cityName: "New York"; timeShift: -4 }
  16.             ListElement { cityName: "London"; timeShift: 0 }
  17.             ListElement { cityName: "Oslo"; timeShift: 1 }
  18.             ListElement { cityName: "Mumbai"; timeShift: 5.5 }
  19.             ListElement { cityName: "Tokyo"; timeShift: 9 }
  20.             ListElement { cityName: "Brisbane"; timeShift: 10 }
  21.             ListElement { cityName: "Los Angeles"; timeShift: -8 }
  22.         }
  23.     }
  24.     //左下角上一个箭头
  25.     Image {
  26.         anchors.left: parent.left
  27.         anchors.bottom: parent.bottom
  28.         anchors.margins: 10
  29.         source: "content/arrow.png"
  30.         rotation: -90
  31.         opacity: clockview.atXBeginning ? 0 : 0.5//当视图滚动到第一个时透明度为0(使用行为动画)
  32.         Behavior on opacity { NumberAnimation { duration: 500 } }//在透明度属性上添加动画(数字动画)
  33.     }
  34.     //右下角下一个箭头
  35.     Image {
  36.         anchors.right: parent.right
  37.         anchors.bottom: parent.bottom
  38.         anchors.margins: 10
  39.         source: "content/arrow.png"
  40.         rotation: 90
  41.         opacity: clockview.atXEnd ? 0 : 0.5
  42.         Behavior on opacity { NumberAnimation { duration: 500 } }
  43.     }
  44. }


阅读(1674) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~