QML之自定义滚动条

一.效果

二.实现

MyScrollBar.qml

import QtQuick 2.0

Rectangle {
    id: scrollBar
    opacity: 0

    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: target.visibleArea.yPosition * scrollBar.height
        width: 15
        height: target.visibleArea.heightRatio * scrollBar.height
        color: "#6D665C"
        radius: 10
        Text{
            text:"☰"
            anchors.centerIn: parent
        }

        MouseArea {
            id: mouseArea
            anchors.fill: button
            hoverEnabled: true
            drag.target: button;
            drag.axis: Drag.YAxis
            drag.minimumY: 0
            drag.maximum