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

来源：互联网发布：淘宝电商差评怎么回复编辑：程序博客网时间：2024/04/30 20:08

依附于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-1011     height: orientation==Qt.Vertical ? target.height-10 : 1012     anchors.right: orientation==Qt.Vertical ? target.right : undefined13     anchors.bottom: orientation==Qt.Vertical ? undefined : target.bottom14 15     // 滚动16     position: orientation==Qt.Vertical ? target.visibleArea.yPosition   : target.visibleArea.xPosition17     pageSize: orientation==Qt.Vertical ? target.visibleArea.heightRatio : target.visibleArea.widthRatio18 19 20     // 移动时显隐滚动轴21     Connections{22         target: root.target23         onMovingVerticallyChanged: {24             if (target.movingVertically)25                 fadeIn.start();26             else27                 fadeOut.start();28         }29         onMovingHorizontallyChanged: {30             if (target.movingHorizontally)31                 fadeIn.start();32             else33                 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: view3         orientation: Qt.Vertical4     }

转载请注明出处：http://surfsky.cnblogs.com

0 0