自定义ScrollBar添加顶部和底部按钮（Windows样式）

我有一个QT应用程序，需要自定义我的ListView ScrollBar，有一个Windows Look＆Fell滚动，包括顶部和底部按钮（单击时向上或向下滚动）

据我所知，我可以从ScrollBar自定义的是contentItem和背景 . 没有默认的方法来添加这些顶部和底部按钮 . 手动添加它

要在顶部和底部添加按钮，我在contentItem中添加了边距，因此我的按钮有空间 . 但是使用该边距，contentItem的高度较小，并且我的ListView中有很多元素，句柄不可见......

是否可以为contentItem设置最小高度？还有其他方法可以使用这2个按钮吗？

提前致谢

码：

import QtQuick 2.7
import QtQuick.Controls 2.0

Item {
    anchors.fill: parent

    MouseArea {
      anchors.fill: id_list
      onWheel: id_list.flick(0, wheel.angleDelta.y * 5)
    }

    ListModel {
         id: listModel
         Component.onCompleted: {
             for (var i = 0; i < 1000; i++)
                 append({ role_text: "Item " + i});
         }
     }

    ListView {
        id: id_list
        anchors.fill: parent

        interactive: false
        boundsBehavior: Flickable.StopAtBounds
        focus: true

        Keys.onPressed: {
          if (event.key === Qt.Key_Up) id_list.flick(0, 500)
          else if (event.key === Qt.Key_Down) id_list.flick(0, -500)
        }

        keyNavigationEnabled: true

        model: listModel
        ScrollBar.vertical: ScrollBar {
            id: id_scroll
            interactive: true;
            policy: ScrollBar.AlwaysOn
            anchors { top: parent.top; topMargin: 0; bottom: parent.bottom; bottomMargin: 0; right: parent.right/*; rightMargin: -2*/}

            contentItem: Item {
                implicitWidth: 11
                implicitHeight: 100

                Rectangle {
                    anchors { top: parent.top; topMargin: 13; bottom: parent.bottom; bottomMargin: 13; left: parent.left; leftMargin: -2; right: parent.right; rightMargin: -2}
                    color: "green"
                }
            }

            background: Item {
                implicitWidth: 11
                implicitHeight: id_scroll.height

                Rectangle {
                    anchors { top: parent.top; bottom: parent.bottom; bottomMargin: 0; left: parent.left; right: parent.right}
                    color: "#ededed"
                }

                Rectangle {
                    anchors { top: parent.top; right: parent.right }
                    height: 15; width: height
                    color: "red"
                    MouseArea {
                        anchors.fill: parent
                        onClicked: id_list.flick(0, 500)
                    }
                }
                Rectangle {
                    anchors { bottom: parent.bottom; right: parent.right }
                    height: 15; width: height
                    color: "red"
                    MouseArea {
                        anchors.fill: parent
                        onClicked: id_list.flick(0, -500)
                    }
                }
            }
        }

        delegate: Rectangle {
            height: 40
            width: id_list.width
            color: "white"
            border { color: "black"; width: 1 }
            TextEdit {
                anchors.centerIn: parent
                id: id_text
                text: role_text;
                selectByMouse: true;
                readOnly: true;
                persistentSelection: true
            }
        }
    }
}