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
                }
            }
        }
    }
}
 

 使用Scrollbar實現

import QtQuick.Controls 2.0

Rectangle {
    id: frame
    clip: true
    width: 160
    height: 160
    border.color: "black"
    anchors.centerIn: parent

    Text {
        id: content
        text: "ABC"
        font.pixelSize: 300
        x: -hbar.position * width
        y: -vbar.position * height
    }

    ScrollBar {
        id: vbar
        hoverEnabled: true
        active: hovered || pressed
        orientation: Qt.Vertical
        size: frame.height / content.height
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.bottom: parent.bottom
    }

    ScrollBar {
        id: hbar
        hoverEnabled: true
        active: hovered || pressed
        orientation: Qt.Horizontal
        size: frame.width / content.width
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
    }
}