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 }

 

总结

以上是生活随笔为你收集整理的qt qml scrollbar 移动APP风格的滚动轴的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。