qt qml scrollbar 移動APP風格的滾動軸

依附於Flickable組件的滾動軸
    自動放置在恰當位置
    拖動時顯示，不動時消失
Lisence: MIT 請保留此聲明
Author: surfsky.cnblogs.com 2014-12

【先看效果】

【下載】

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

【核心代碼】

ScrollBar {
    id: root
    opacity: 0
    orientation: Qt.Vertical

    // 綁定到Flickable組件
    property Flickable target : Flickable{}

    // 位置
    width: orientation==Qt.Vertical ? 10 : target.width-10
    height: orientation==Qt.Vertical ? target.height-10 : 10
    anchors.right: orientation==Qt.Vertical ? target.right : undefined
    anchors.bottom: orientation==Qt.Vertical ? undefined : target.bottom

    // 滾動
    position: orientation==Qt.Vertical ? target.visibleArea.yPosition   : target.visibleArea.xPosition
    pageSize: orientation==Qt.Vertical ? target.visibleArea.heightRatio : target.visibleArea.widthRatio


    // 移動時顯隱滾動軸
    Connections{
        target: root.target
        onMovingVerticallyChanged: {
            if (target.movingVertically)
                fadeIn.start();
            else
                fadeOut.start();
        }
        onMovingHorizontallyChanged: {
            if (target.movingHorizontally)
                fadeIn.start();
            else
                fadeOut.start();
        }
    }
    NumberAnimation { id:fadeIn;  target: root; properties: "opacity"; duration: 400; from:0; to:1 }
    NumberAnimation { id:fadeOut; target: root; properties: "opacity"; duration: 400; from:1; to:0 }
}

 

【調用示例】

    FlickableScrollBar {
        target: view
        orientation: Qt.Vertical
    }