Qml 实现一个垂直滑动条

ScrollBar.vertical: ScrollBar {
id: scrollBar
visible: true
active: true
orientation: Qt.Vertical
topPadding:0
bottomPadding:0
anchors.top: parent.top
anchors.left: parent.right
anchors.leftMargin: 4

background: Image {
id: idScrollBackgrond
width: 4
height: 20
source: ""
}

contentItem: Rectangle {
id:scrollBarThumb
implicitWidth: 4
implicitHeight: 100
radius: 50
anchors.left: parent.left
color: "blue"
onHeightChanged: {
if(scrollBarThumb.height<42)
{
scrollBarThumb.height = 42;
}
}
}
}

1. ScrollBar元素用于创建一个滚动条，用于控制垂直滚动视图的滚动。
2. visible: 决定滚动条是否可见。
3. active: true：设置滚动条为活动状态，允许用户交互。
4. orientation: Qt.Vertical：设置滚动条为垂直方向。
5. topPadding: 0和bottomPadding: 0：设置滚动条的顶部和底部内边距为0。
6. anchors.top: 、anchors.left: 、anchors.leftMargin: 4：设置滚动条相对于垂直滚动视图的位置和边距。
7. background：设置滚动条的背景图像。
8. contentItem：定义滚动条的内容项，这里是一个矩形元素作为滚动条的滑块。
9. implicitWidth: 4和implicitHeight: 100：设置滚动条滑块的默认宽度和高度。
10. radius: 50：设置滚动条滑块的圆角半径。
11. anchors.left: idScrollBackgrond.left：设置滑块相对于背景的左侧对齐。
12. color:：设置滑块的颜色。
13. onHeightChanged：当滑块高度发生变化时的处理逻辑，确保滑块高度不小于42。