码迷,mamicode.com
首页 > 移动开发 > 详细

qt qml scrollbar 移动APP风格的滚动轴

时间:2015-02-13 19:47:26      阅读:297      评论:0      收藏:0      [点我收藏+]

标签:

依附于Flickable组件的滚动轴
    自动放置在恰当位置
    拖动时显示,不动时消失
Lisence: MIT 请保留此声明
Author: surfsky.cnblogs.com 2014-12

【先看效果】

技术分享

技术分享

【下载】

http://download.csdn.net/detail/surfsky/8426563

【核心代码】

 1 ScrollBar {
 2     id: root
 3     opacity: 0
 4     orientation: Qt.Vertical
 5 
 6     // 绑定到Flickable组件
 7     property Flickable target : Flickable{}
 8 
 9     // 位置
10     width: orientation==Qt.Vertical ? 10 : target.width-10
11     height: orientation==Qt.Vertical ? target.height-10 : 10
12     anchors.right: orientation==Qt.Vertical ? target.right : undefined
13     anchors.bottom: orientation==Qt.Vertical ? undefined : target.bottom
14 
15     // 滚动
16     position: orientation==Qt.Vertical ? target.visibleArea.yPosition   : target.visibleArea.xPosition
17     pageSize: orientation==Qt.Vertical ? target.visibleArea.heightRatio : target.visibleArea.widthRatio
18 
19 
20     // 移动时显隐滚动轴
21     Connections{
22         target: root.target
23         onMovingVerticallyChanged: {
24             if (target.movingVertically)
25                 fadeIn.start();
26             else
27                 fadeOut.start();
28         }
29         onMovingHorizontallyChanged: {
30             if (target.movingHorizontally)
31                 fadeIn.start();
32             else
33                 fadeOut.start();
34         }
35     }
36     NumberAnimation { id:fadeIn;  target: root; properties: "opacity"; duration: 400; from:0; to:1 }
37     NumberAnimation { id:fadeOut; target: root; properties: "opacity"; duration: 400; from:1; to:0 }
38 }

 

【调用示例】

1     FlickableScrollBar {
2         target: view
3         orientation: Qt.Vertical
4     }

 

qt qml scrollbar 移动APP风格的滚动轴

标签:

原文地址:http://www.cnblogs.com/surfsky/p/4290753.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!