qml demo分析(clocks-时钟)
一、效果展示
效果如图1所示,时钟列表支持鼠标左右拖动,带有黑色背景的是晚上时钟,无黑色背景的是白天时钟
二、源码分析
1、main.cpp文件中只包含了一个宏,该宏的具体解释请看qml 示例中的关键宏文章
2、时钟项
Item {
id : clock
width: {
if (ListView.view && ListView.view.width >= )
return ListView.view.width / Math.floor(ListView.view.width / 200.0);
else
return ;
} height: {
if (ListView.view && ListView.view.height >= )
return ListView.view.height;
else
return ;
} property alias city: cityLabel.text//属性别名,方便在外部使用
property int hours//自定义属性
property int minutes
property int seconds
property real shift
property bool night: false//是否是晚上 来决定是否显示黑色实心圈
property bool internationalTime: true //Unset for local time //js函数
function timeChanged() {
var date = new Date;
hours = internationalTime ? date.getUTCHours() + Math.floor(clock.shift) : date.getHours()
night = ( hours < || hours > )
minutes = internationalTime ? date.getUTCMinutes() + ((clock.shift % ) * ) : date.getMinutes()
seconds = date.getUTCSeconds();
} Timer {
interval: ; running: true; repeat: true;//一个每隔100ms重复执行的定时器,默认启动
onTriggered: clock.timeChanged()//定时器槽函数
} Item {
anchors.centerIn: parent
width: ; height: Image { id: background; source: "clock.png"; visible: clock.night == false }//最外层白色圈
Image { source: "clock-night.png"; visible: clock.night == true }//黑色实心圈,带有白色实心圆球的刻度点 //时针
Image {
x: 92.5; y:
source: "hour.png"
transform: Rotation {
id: hourRotation
origin.x: 7.5; origin.y: ;
angle: (clock.hours * ) + (clock.minutes * 0.5)
Behavior on angle {
SpringAnimation { spring: ; damping: 0.2; modulus: }
}
}
} //分针
Image {
x: 93.5; y:
source: "minute.png"
transform: Rotation {
id: minuteRotation
origin.x: 6.5; origin.y: ;
angle: clock.minutes *
Behavior on angle {
SpringAnimation { spring: ; damping: 0.2; modulus: }
}
}
} //秒针
Image {
x: 97.5; y:
source: "second.png"
transform: Rotation {
id: secondRotation
origin.x: 2.5; origin.y: ;
angle: clock.seconds *
Behavior on angle {
SpringAnimation { spring: ; damping: 0.2; modulus: }
}
}
}
//中心白色圆圈
Image {
anchors.centerIn: background; source: "center.png"
} Text {
id: cityLabel//该属性已经被导出,在clocks.qml文件中指定该属性值
y: ; anchors.horizontalCenter: parent.horizontalCenter
color: "white"
font.family: "Helvetica"
font.bold: true; font.pixelSize:
style: Text.Raised; styleColor: "black"
}
}
}
3、时钟列表
import "content" as Content //导入目录 该目录底下的所有qml自定义控件均可以直接使用 Rectangle {
id: root
width: ; height:
color: "#646464" ListView {//列表视图
id: clockview//唯一id
anchors.fill: parent//填充整个父窗口
orientation: ListView.Horizontal//列表朝向为水平方向
cacheBuffer: //左右2000个像素以内的委托项都不会被析构
snapMode: ListView.SnapOneItem//拖拽模式
highlightRangeMode: ListView.ApplyRange//高亮模式,高亮尽可能在可是区间内 delegate: Content.Clock { city: cityName; shift: timeShift }//设置Clock控件的导出属性值
model: ListModel {//静态model
ListElement { cityName: "New York"; timeShift: - }
ListElement { cityName: "London"; timeShift: }
ListElement { cityName: "Oslo"; timeShift: }
ListElement { cityName: "Mumbai"; timeShift: 5.5 }
ListElement { cityName: "Tokyo"; timeShift: }
ListElement { cityName: "Brisbane"; timeShift: }
ListElement { cityName: "Los Angeles"; timeShift: - }
}
}
//左下角上一个箭头
Image {
anchors.left: parent.left
anchors.bottom: parent.bottom
anchors.margins:
source: "content/arrow.png"
rotation: -
opacity: clockview.atXBeginning ? : 0.5//当视图滚动到第一个时透明度为0(使用行为动画)
Behavior on opacity { NumberAnimation { duration: } }//在透明度属性上添加动画(数字动画)
}
//右下角下一个箭头
Image {
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.margins:
source: "content/arrow.png"
rotation:
opacity: clockview.atXEnd ? : 0.5
Behavior on opacity { NumberAnimation { duration: } }
}
}
qml demo分析(clocks-时钟)的更多相关文章
- qml demo分析(threadedanimation-线程动画)
一.效果预览 使用过qml的同学都知道,使用qml做动画效果是非常简单的,再也不需要像QWidget那样,自己模拟一个动画,费时又费力,往往还达不到效果.今天我们就来分析下qml的两种动画实现方式,如 ...
- qml demo分析(maskedmousearea-异形窗口)
一.效果展示 如本文的标题所示,这篇文章分析的demo是一个异形窗口,主要展示鼠标在和异形区域交互的使用,效果如图1所示,当鼠标移动到白云或者月亮上时,相应的物体会高亮,当鼠标按下时,物体会有一个放大 ...
- qml demo分析(maroon-小游戏)
1.效果展示 这篇文章我还是分析一个qt源码中的qml程序,程序运行效果如下图所示. 图1 游戏开始 图2 游戏中 2.源码分析 这个游戏的源码文件比较多,为了能更清楚的了解整个代码,我先整体分析 ...
- qml demo分析(abstractitemmodel-数据分离)
一.概述 qt5之后qml也可以被用于桌面程序开发,今天我就拿出qt demo中的一个qml示例程序进行分析.这个demo主要是展示了qml数据和展示分离的使用方式,qml只专注于快速高效的绘制界面, ...
- qml demo分析(externaldraganddrop-拖拽)
一.效果展示 客户端程序拖拽是一个很常见的需求,对于QWidget程序来说,需要重写如图1这么几个方法,通过重写这几个方法的逻辑,我们就可以控制鼠标拖拽的逻辑,糟糕的是QDrag执行exec后是一个阻 ...
- qml demo分析(threading-线程任务)
一.关键类说明 qml内置了WorkerScript组件,该组件有一个source属性,可以加载js文件,含有一个名为message的信号,意味着他有一个默认的onMessage槽函数,除此之外他还有 ...
- qml demo分析(text-字体展示)
上一篇文章分析了一个小游戏,使用qml编写界面+js进行复杂逻辑控制,算是一个比较完整的qml示例代码了,今天就不那么继续变态啦,来看一个简单的字体示例程序吧,该示例代码比较简单,主要是展示了几个简单 ...
- qml demo分析(samegame-拼图游戏)
一.效果展示 相信大家都玩儿过连连看游戏,而且此款游戏也是闲时一款打发时间的趣事,那么接下来我将分析一款类似的游戏,完全使用qml编写界面,复杂逻辑使用js完成.由于此游戏包含4种游戏模式,因此本篇文 ...
- qml demo分析(rssnews-常见新闻布局)
一.效果展示 今儿来分析一篇常见的ui布局,完全使用qml编写,ui交互效果友好,如图1所示,是一个常见的客户端新闻展示效果,左侧是一个列表,右侧是新闻详情. 图1 新闻效果图 二.源码分析 首先先来 ...
随机推荐
- python实现简体中文和繁体相互转换
1. opencc-python 如果目录上的链接被屏蔽了,请手动复制 https://pypi.python.org/pypi/opencc-python/ 首先介绍opencc的python实现库 ...
- poj~1236 Network of Schools 强连通入门题
一些学校连接到计算机网络.这些学校之间已经达成了协议: 每所学校都有一份分发软件的学校名单("接收学校"). 请注意,如果B在学校A的分发名单中,则A不一定出现在学校B的名单中您需 ...
- (一)Servlet简介
相关名词解释 HTML:Hyper Text Markup Language,超文本标记语言 HTTP:Hyper Text Transfer Protocol,超文本传输协议 URL:Uniform ...
- &,|,^的用法
&,|,~,^的用法 &按位与 |按位或 ~按位非 ^按位异或 举例: int x = 5; int y = 11; System.out.println(x|y); System.o ...
- 谈谈.NET架构师面试及如何设计面试题
上星期:应老东家的要求,帮其面试.NET架构师. 于是:老东家进行了一星期的简历收集: 终于:在一堆简历里,精挑细选了四个: 约了:周末上午下午各两个. 面试者年龄:在30-35岁左右,差不多10年. ...
- 华盛顿邮报:FBI 屡次夸大了“手机加密威胁”的数字
<华盛顿邮报>周二报道称,美国联邦调查局(FBI)严重夸大了由加密手机所造成的问题.以去年为例,该机构调查人员声称被大约 7800 部涉嫌犯罪活动的加密设备挡在了门外,而准确的数字应该在 ...
- QTimer在QThread环境中失效的问题
QTimer在非QThread的环境下能正常工作.但在QThread环境下,需要做一些改动才能正常工作. 创建Qt的线程有两种方式: 1. 子例化QThread 可以在虚函数run中启动定时器,大致的 ...
- H5移动端项目案例、web手机微商城实战开发
自微信生态圈一步步强大后,关于移动端购物的趋势,逐渐成为大众关心的内容,目前市场上关于移动商城的制定就有大量版本,比如.微商城.移动商城.移动webAPP.微信商城各等各种定义层出不穷,这就对于移动端 ...
- Spring事务的一些特性
事务的四大特征 1.原子性:一个事务中所有对数据库的操作是一个不可分割的操作序列,要么全做要么全不做 2.一致性:数据不会因为事务的执行而遭到破坏 3.隔离性:一个事物的执行,不受其他事务的干扰,即并 ...
- 启动链码报rpc error: code = Unimplemented desc = unknown service protos.ChaincodeSupport start error
参考链接:https://stackoverflow.com/questions/48007519/unimplemented-desc-unknown-service-protos-chaincod ...