滚动条不显示

Question

这个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
        ...

谢谢！

Answer 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 { ... }
}

滚动条不显示

Scrollbar does not show-up

scrollbar

qml