首页 > 代码库 > qml demo分析(clocks-时钟)
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//唯一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 }
qml demo分析(clocks-时钟)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。