ScrollView 内的 ColumnLayout 内的 ListView 无法填充 height/width

Question

我想在 TextFeild、CheckBoxes 和一些 Button 中显示一些数据，然后显示一个长列表。我希望整个页面都可以滚动，而不仅仅是 ListView。我怎样才能做到这一点？

这是我到现在为止的想法：-

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    ScrollView { //comment out this
        anchors.fill: parent //comment out this
        ColumnLayout {
            anchors.fill: parent
            spacing: 5

            Rectangle {
                Layout.fillWidth: true
                Layout.preferredHeight: 100
                color: "green"
            }
            Rectangle {
                Layout.fillWidth: true
                Layout.preferredHeight: 100
                color: "red"
            }

            ListView {
                model : 20
                Layout.fillWidth: true
                Layout.fillHeight: true
                delegate: Frame {
                    Label {
                        text: modelData + "th Item"
                    }
                }

            }
        }
    } //comment out this
}

这不起作用。它只显示 ListView 的一个单元格并且不可滚动。如何让 ListView 填充 height/width 并使整个页面可滚动？

Answer 1

第一个问题是，如果 ScrollView 的内容与 ScrollView 的高度相同，则无法滚动。它需要内容更大。否则没有什么可以滚动到。所以适合 parent 高度的 ColumnLayout 是行不通的。在这种情况下，Column 优于 ColumnLayout，因为它会增长到其 children 的高度，而不是将其 children 调整为自己的大小。

第二个问题是 ListView 没有正确计算出它的高度。我不完全确定为什么不，但我可以通过使用 childrenRect.height.

让你的例子工作

    ScrollView {
        anchors.fill: parent 
        Column {
            width: parent.width
            spacing: 5

            Rectangle {
                width: parent.width
                height: 100
                color: "green"
            }
            Rectangle {
                width: parent.width
                height: 100
                color: "red"
            }

            ListView {
                model : 20
                width: parent.width
                height: childrenRect.height
                delegate: Frame {
                    Label {
                        text: modelData + "th Item"
                    }
                }

            }
        }
    }

ScrollView 内的 ColumnLayout 内的 ListView 无法填充 height/width

ListView inside ColumnLayout inside ScrollView not filling available height/width

qt

listview

scrollview

qml