qml实现滚动条

Window {
    id: root
    visible: true
    width: 500
    height: 500

    color: "#535353"
    Rectangle{
        id: dst
        //(0,0)
    }

    ListView{
        id: view
        anchors.fill: parent
        anchors.margins: 100
        model: 15
        spacing: 10
        clip: true

        delegate: Rectangle{
            width: parent.width
            height: 50
            //产生随机颜色
            color: Qt.rgba(Math.random(),Math.random(),Math.random())
            Text {
                anchors.centerIn: parent
                text: index
            }
            MouseArea{
                id: msa
                anchors.fill: parent
                onClicked: {
                    //相对于dst（0，0）点的位置坐标
                    var pos = dst.mapFromItem(msa,mouse.x, mouse.y);
                    console.log(pos.x,pos.y)
                }
            }
        }
    }

    // 滚动条  风格样式以效果图未注
    Rectangle {
        id: scrollbar
        anchors.right: view.right
        anchors.top: view.top
        width: 10
        height: view.height
        color: "lightgray"
        clip: true

        // 按钮
        Rectangle {
            id: button
            x: 0
            //view.visibleArea.yPosition表示一个变量,初始值为0,滚动条滚到底部时最大
            y: view.visibleArea.yPosition * scrollbar.height
            width: 10
            //滚动按钮的长度为view.height/view.contentHeight*scrollbar.height;与下方代码等价
            height: view.visibleArea.heightRatio * scrollbar.height;
            color: "green"

            // 鼠标区域
            MouseArea {
                id: mouseArea
                anchors.fill: button
                //使得按钮可以上下拖动
                drag.target: button
                drag.axis: Drag.YAxis
                drag.minimumY: 0
                drag.maximumY: scrollbar.height - button.height

                // 拖动
                onMouseYChanged: {
                    view.contentY = button.y / scrollbar.height * view.contentHeight
                }
            }
        }
    }
}