如何改变滚动条的颜色在QML?

Question

我尝试使用contentItem自定义ScrollBar，但ScrollBar在这种情况下不显示。还有其他方法可以改变滚动条的颜色吗?

ListView {
anchors.fill        : parent
ScrollBar.vertical  : ScrollBar {
anchors.rightMargin: 10 * AppTheme.scaleValue
contentItem: Rectangle {
color: "red"
}
}
boundsBehavior      : Flickable.StopAtBounds
currentIndex        : 0
focus               : true
clip                : true
model               : checkDataModel

delegate: Rectangle {
id      : rect
width   : onlineChecksUpperPanel.width - 15 * AppTheme.scaleValue
height  : 40 * AppTheme.scaleValue
color   : index % 2 == 0 ? "#ECEEF1" : "#FFFFFF"
Text {
text                : checkNum
font.family         : AppTheme.fontBold.name
font.pixelSize      : AppTheme.textSizePxSmaller
textFormat          : Text.StyledText
color               : AppTheme.textColorTouchDark
anchors.verticalCenter: parent.verticalCenter
leftPadding: 16 * AppTheme.scaleValue
}
}
}

Answer 1

您缺少的是contentItem上的implicitWidth。它需要知道绘制滚动条的大小。它可以像这样工作:

ScrollBar.vertical  : ScrollBar {
anchors.rightMargin: 10 * AppTheme.scaleValue
contentItem: Rectangle {
implicitWidth: 6
color: "red"
}
}

Answer 2

下面的代码对我来说是好的。可能源代码中不存在变量，查看器无法呈现该项。

import QtQuick 2.12
import QtQuick.Controls 2.12
ListView {
anchors.fill        : parent
ScrollBar.vertical  : ScrollBar {
anchors.rightMargin: 10 * AppTheme.scaleValue
contentItem: Rectangle {
color: "red"
}
}
boundsBehavior      : Flickable.StopAtBounds
currentIndex        : 0
focus               : true
clip                : true
model               : 20
delegate: Rectangle {
id      : rect
width   : parent.width
height  : 50
color   : index % 2 == 0 ? "#ECEEF1" : "#FFFFFF"
Text {
text                : index
textFormat          : Text.StyledText
color               : "red"
anchors.fill: parent
}
}
}