qml实现滚动条

Scrolbar.qml

import QtQuick 2.7
import QtQuick.Controls 2.0

// 滚动条
Rectangle {
    id: scrollbar;
    opacity: 0
    // 绑定到ListView组件
    property ListView target : ListView{}

    width: 15; height: target.height;
    anchors.right: parent.right
    color: "#ccbfbf";radius: 10;clip: true;
    // 按钮
    Rectangle { id: button; x: 0; y: listviewer.visibleArea.yPosition * scrollbar.height;
        width: 15; height: listviewer.visibleArea.heightRatio * scrollbar.height;
        color: "#6D665C"; radius: 10;
        Text{ text:"☰";anchors.centerIn: parent}

        // 鼠标区域
        MouseArea {id: mouseArea;anchors.fill: button
            drag.target: button;drag.axis: Drag.YAxis;drag.minimumY: 0;drag.maximumY: scrollbar.height - button.height
            onPressed: {button.color = "#A4D3EE";fadeIn.start();}
            onReleased: {button.color = "#6D665C";fadeOut.start();}
            // 拖动