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

依附于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     }