qml demo分析(clocks-时钟)
一、效果展示
效果如图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 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//唯一id 10 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 {//静态model 18 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.left 30 anchors.bottom: parent.bottom 31 anchors.margins: 10 32 source: "content/arrow.png" 33 rotation: -90 34 opacity: clockview.atXBeginning ? 0 : 0.5//当视图滚动到第一个时透明度为0(使用行为动画) 35 Behavior on opacity { NumberAnimation { duration: 500 } }//在透明度属性上添加动画(数字动画) 36 } 37 //右下角下一个箭头 38 Image { 39 anchors.right: parent.right 40 anchors.bottom: parent.bottom 41 anchors.margins: 10 42 source: "content/arrow.png" 43 rotation: 90 44 opacity: clockview.atXEnd ? 0 : 0.5 45 Behavior on opacity { NumberAnimation { duration: 500 } } 46 } 47 }
转载于:https://www.cnblogs.com/swarmbees/p/6344837.html
qml demo分析(clocks-时钟)相关推荐
- qml demo分析(threadedanimation-线程动画)
一.效果预览 使用过qml的同学都知道,使用qml做动画效果是非常简单的,再也不需要像QWidget那样,自己模拟一个动画,费时又费力,往往还达不到效果.今天我们就来分析下qml的两种动画实现方式,如 ...
- qml demo分析(threading-线程任务)
一.关键类说明 qml内置了WorkerScript组件,该组件有一个source属性,可以加载js文件,含有一个名为message的信号,意味着他有一个默认的onMessage槽函数,除此之外他还有 ...
- qml demo分析(customgeometry-贝塞尔曲线)
一.效果展示 本篇文章还是带来一个简单的qt示例分析,且看图1效果. 图1 贝塞尔曲线 二.源码分析 该示例代码所在目录quick\scenegraph\customgeometry,感兴趣的同学可以 ...
- go-pitaya学习笔记(9)-rate_limiting demo分析
学习笔记: 我家别墅靠大海/pitaya-learn 尝试集成功能:我家别墅靠大海/pitaya-game 如果你正在看此笔记,请你左边放笔记,右边放chatdemo的代码!! 我是按代码的顺序记的笔 ...
- go-pitaya学习笔记(6)-cluster-protobuf demo分析
学习笔记: 我家别墅靠大海/pitaya-learn 尝试集成功能:我家别墅靠大海/pitaya-game 如果你正在看此笔记,请你左边放笔记,右边放chatdemo的代码!! 我是按代码的顺序记的笔 ...
- go-pitaya学习笔记(7)-custom_metrics demo分析
学习笔记: 我家别墅靠大海/pitaya-learn 尝试集成功能:我家别墅靠大海/pitaya-game 如果你正在看此笔记,请你左边放笔记,右边放chatdemo的代码!! 我是按代码的顺序记的笔 ...
- motan学习笔记 三 motan Demo 分析
motan学习笔记 一 微博轻量级RPC框架Motan motan学习笔记 二 motan架构分析 motan学习笔记 三 motan Demo 分析 motan学习笔记 四 motan Demo 之 ...
- The Clocks时钟
The Clocks时钟 IOI'94 - Day 2 考虑将如此安排在一个 3X3 行列中的九个时钟: 目标要找一个最小的移动顺序次将所有的指针指向 12 点. 下面原表格列出了 9 种不同的旋 ...
- (原创)cocos2dx-lua TableView官方demo分析
本来是想看看网上的教程文章,结果看了好几篇,复制代码各种报错,有很多不存在的类和变量,根本用不了. 所以干脆自己去看官方demo,经过自己分析测试,已经大概会用了,顺便记录一下. 以下是代码,复制粘贴 ...
最新文章
- 自动驾驶领域大佬在CVPR2020中 关于3D Reconstruction Learning的报告
- 计算机病毒的八个特征,计算机病毒的五个特征- 1:.单项选择题(8)
- 移动端模态窗口的滚动和橡皮筋问题解决方案
- 树莓派学习笔记(7):利用bypy实现树莓派NAS同步百度云
- JavaScript设计模式——单例模式的理解与应用
- python如何创建excel文件_Python xlrd/xlwt 创建excel文件及常用操作
- 谨防代理木马和怕米释放有毒程序
- cocos2d-lua3.7组件篇(三)-http通信demo
- Java开发技巧详细知识体系总结(2021版)
- linux HBA 卡驱动安装
- 全民奇迹辅助制作视频教程
- Unity3D快速入门超详细视频教程(全套免费送)
- h3c交换机配置远程管理_H3C交换机配置管理VLAN和配置远程登录
- 【吉大刘大有数据结构绿皮书】例3.16:已知非空线性链表第一个结点的指针为list,写一算法,删除线性链表中的第i个结点。
- unity2D游戏案例-躲避怪云
- 原理 CDN加速原理
- 计算机笔记本有wife但显示未连接怎么办,笔记本电脑已连接wifi但无法上网怎么解决?...
- TikTok跨境电商:TikTok代开英国小店、印尼小店,美国小黄车,广告账户
- through2.js,xtend.js源码
- 燕十八PHP公益课堂学习笔记