QML: 将滚动条附加到 ListView

Question

我遇到了ListView的问题。ListView太长了，一部分超出了窗口范围，但是我无法添加滚动条。我尝试了许多不同的组合。我认为问题在于高度参数，但如果删除它，ListView只会显示第一个条目。

Column{
    anchors.fill: parent
    Row{
        id: buttonsRow
            Button{
                text: "Open dump file"
                onClicked: fileDialog.visible = true
            }
            Button{
                text: "Copy raw data to clipboard"
            }
    }
    ListView{
        id: listView
        anchors.top: buttonsRow.bottom
        height: contentHeight
        //clip: true
        flickableDirection: Flickable.VerticalFlick
        boundsBehavior: Flickable.StopAtBounds
        interactive: true
        model: ListModel{
            id: listModel
        }
        delegate: MDelegate{}
    }
}

有没有办法使它可滚动？

- Marzanna

Answer 1

在您发布的代码中，我没有看到您已经添加滚动条。 您需要在ListView中实际包含一个ScrollBar组件，像这样：

    ListView { 
        id: listView
        ScrollBar.vertical: ScrollBar {
        active: true
        }
    }

请查看“将滚动条附加到可滚动项”

的内容。

- WaltPurvis

Answer 2

将 height 设置为 contentHeight 可能是问题所在。这会使 ListView 的高度等于所有项目的高度之和。滚动条仅在视图高度小于其内容高度时才起作用。

这里有一种使用布局的方法：

import QtQuick 2.8
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3

ApplicationWindow {
    width: 400
    height: 300
    visible: true

    ColumnLayout {
        anchors.fill: parent

        RowLayout {
            id: buttonsRow
            Button {
                text: "Open dump file"
            }
            Button {
                text: "Copy raw data to clipboard"
            }
        }

        ListView {
            id: listView
            flickableDirection: Flickable.VerticalFlick
            boundsBehavior: Flickable.StopAtBounds
            model: 100
            clip: true
            delegate: ItemDelegate {
                text: modelData
            }

            Layout.fillWidth: true
            Layout.fillHeight: true

            ScrollBar.vertical: ScrollBar {}
        }
    }
}

- Mitch

Answer 3

ScrollBar.vertical:ScrollBar{
            id: listView
            anchors.right: parent.right
            visible: listView.contentHeight > listView.height ? true : false
        }

- Sudarshan Deshmukh