QML：将滚动条附加到 ListView答案

【问题标题】：QML: Attach scrollbar to ListViewQML：将滚动条附加到 ListView
【发布时间】：2018-01-20 20:36:00
【问题描述】：

我遇到了 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{}
    }
}

有什么办法让它可以滚动吗？

【问题讨论】：

标签： qt listview qml

【解决方案1】：

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

【讨论】：

【解决方案2】：

在您发布的代码中，我根本看不到您在哪里附加了滚动条。您实际上需要在 ListView 中包含一个 ScrollBar 组件，如下所示：

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

请参阅https://doc.qt.io/qt-5/qml-qtquick-controls2-scrollbar.html 上的“将 ScrollBar 附加到 Flickable”

【讨论】：

【解决方案3】：

将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 {}
        }
    }
}

【讨论】：