原文:http://www.cnblogs.com/swarmbees/p/6344837.html
一、效果展示
效果如图1所示,时钟列表支持鼠标左右拖动,带有黑色背景的是晚上时钟,无黑色背景的是白天时钟
二、源码分析
1、main.cpp文件中只包含了一个宏,该宏的具体解释请看qml 示例中的关键宏文章
2、时钟项
3、时钟列表
-
import "content" as Content //导入目录 该目录底下的所有qml自定义控件均可以直接使用
-
-
Rectangle {
-
id: root
-
width: 640; height: 320
-
color: "#646464"
-
-
ListView {//列表视图
-
id: clockview//唯一id
-
anchors.fill: parent//填充整个父窗口
-
orientation: ListView.Horizontal//列表朝向为水平方向
-
cacheBuffer: 2000//左右2000个像素以内的委托项都不会被析构
-
snapMode: ListView.SnapOneItem//拖拽模式
-
highlightRangeMode: ListView.ApplyRange//高亮模式,高亮尽可能在可是区间内
-
-
delegate: Content.Clock { city: cityName; shift: timeShift }//设置Clock控件的导出属性值
-
model: ListModel {//静态model
-
ListElement { cityName: "New York"; timeShift: -4 }
-
ListElement { cityName: "London"; timeShift: 0 }
-
ListElement { cityName: "Oslo"; timeShift: 1 }
-
ListElement { cityName: "Mumbai"; timeShift: 5.5 }
-
ListElement { cityName: "Tokyo"; timeShift: 9 }
-
ListElement { cityName: "Brisbane"; timeShift: 10 }
-
ListElement { cityName: "Los Angeles"; timeShift: -8 }
-
}
-
}
-
//左下角上一个箭头
-
Image {
-
anchors.left: parent.left
-
anchors.bottom: parent.bottom
-
anchors.margins: 10
-
source: "content/arrow.png"
-
rotation: -90
-
opacity: clockview.atXBeginning ? 0 : 0.5//当视图滚动到第一个时透明度为0(使用行为动画)
-
Behavior on opacity { NumberAnimation { duration: 500 } }//在透明度属性上添加动画(数字动画)
-
}
-
//右下角下一个箭头
-
Image {
-
anchors.right: parent.right
-
anchors.bottom: parent.bottom
-
anchors.margins: 10
-
source: "content/arrow.png"
-
rotation: 90
-
opacity: clockview.atXEnd ? 0 : 0.5
-
Behavior on opacity { NumberAnimation { duration: 500 } }
-
}
-
}
阅读(1677) | 评论(0) | 转发(0) |