qml demo分析(clocks-时钟)

1950阅读　0评论2017-03-06　owen0725
分类：Android平台

原文：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.     }

  10.     height: {
  11.         if (ListView.view && ListView.view.height >= 240)
  12.             return ListView.view.height;
  13.         else
  14.             return 240;
  15.     }

  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

  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.     }

  34.     Timer {
  35.         interval: 100; running: true; repeat: true;//一个每隔100ms重复执行的定时器，默认启动
  36.         onTriggered: clock.timeChanged()//定时器槽函数
  37.     }

  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 }//黑色实心圈，带有白色实心圆球的刻度点

  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.         }

  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.         }

  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.         }

  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自定义控件均可以直接使用

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

  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//高亮模式，高亮尽可能在可是区间内

  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. }


上一篇：QML Hello world 及界面切换
下一篇：运用QML制作圆形进度条效果