滚动条不显示答案

【问题标题】：Scrollbar does not show-up滚动条不显示
【发布时间】：2021-10-26 10:55:59
【问题描述】：

这个 ScrollBar 没有出现，我不明白为什么。在我最好的尝试中，我得到了一个大的红色矩形，但无法使用它来水平滚动 idRootsGrid。我错过了什么？

Flickable {
    id: flickable
    Layout.alignment: Qt.AlignLeft
    Layout.fillWidth: true
    Layout.preferredHeight: idRootsGrid.implicitHeight
    clip: true
    ScrollBar.horizontal: ScrollBar {
        //anchors.top: flickable.top
        anchors.bottom: flickable.bottom
        //anchors.right: flickable.right
        //anchors.left: flickable.left
        active: true
        visible: true
        contentItem: Rectangle {
            id: contentItem_rect2
            radius: implicitHeight / 2
            color: "Red"
            width: 10 // This will be overridden by the width of the scrollbar
            height: 10 // This will be overridden based on the size of the scrollbar
        }
        //size: 10
        width: 5
   //height: 10
    }
    GridLayout {
        id: idRootsGrid
        columnSpacing: 5
        rowSpacing: 10
        Layout.alignment: Qt.AlignLeft
        rows: 1
        ...

谢谢！

【问题讨论】：

标签： qml scrollbar

【解决方案1】：

我在您的代码中发现了两个问题。主要问题是您的 Scrollbar 的 contentItem 需要定义 implicitHeight。它使用implicitHeight 而不是height 来确定如何绘制它。

其次，您的 Flickable 需要知道其内容有多大，因此我必须将其 contentWidth 属性设置为您的 GridLayout 的大小。

Flickable {
    id: flickable
    Layout.alignment: Qt.AlignLeft
    Layout.fillWidth: true
    Layout.preferredHeight: idRootsGrid.implicitHeight
    clip: true

    contentWidth: idRootsGrid.width

    ScrollBar.horizontal: ScrollBar {
        anchors.bottom: flickable.bottom
        active: true
        visible: true

        contentItem: Rectangle {
            id: contentItem_rect2
            radius: implicitHeight / 2
            color: "Red"

            implicitHeight: 10
        }
    }
    GridLayout { ... }
}

【讨论】：