如何在 QML 中更改 ScrollBar 颜色？答案

【问题标题】：How to change ScrollBar color in QML?如何在 QML 中更改 ScrollBar 颜色？
【发布时间】：2021-05-18 00:52:06
【问题描述】：

我尝试使用contentItem 自定义滚动条，但在这种情况下滚动条不显示。还有其他方法可以改变 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
        }
    }
}

【问题讨论】：

标签： qt qml scrollbar

【解决方案1】：

您缺少的是contentItem 上的implicitWidth。它需要知道绘制滚动条的大小。它会像这样正常工作：

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

【讨论】：

太棒了！如果这解决了您的问题，您能否将答案标记为已接受？

【解决方案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
        }
    }
}

【讨论】：