为什么不能在ColumnLayout中使用ScrollView？

Question

我有一个ListView周围的ScrollView。 但是，当我将其放在ColumnLayout中时，ListView消失了。

我的实际代码更大，更复杂，但是我将问题简化为这个小例子。

import QtQuick 2.11
import QtQuick.Window 2.11
import QtQuick.Layouts 1.11
import QtQuick.Controls 2.4

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

    ListModel {
        id: theModel
        ListElement { display: "one" }
        ListElement { display: "two" }
        ListElement { display: "three" }
        ListElement { display: "four" }
        ListElement { display: "five" }
    }

    ColumnLayout {
        ScrollView
        {
            width: 150
            height: 150
            clip: true
            ListView {
                model: theModel
                anchors.fill: parent
                delegate: Column {
                    TextField {
                        text: display
                    }
                }
            }
        }
        Rectangle {
            color: "black"
            width: 100
            height: 30
        }
    }
}

没有ColumnLayout和Rectangle，我得到一个可滚动的窗口，显示了预期的ListView的一部分。 但是，包括它们在内，除了矩形上方的一些空白之外，没有任何ListView的迹象。

Answer 1

Qt快速布局会调整其所有子项的大小（例如， ColumnLayout调整子项的高度， RowLayout调整子项的宽度），因此您应该使用Layout Attached属性指示如何布局它们，而不是设置大小。 例如

ScrollView {
    Layout.maximumHeight: 150 // height will be updated according to these layout properties

    width: 150
    clip: true
    ListView {
        model: theModel
        anchors.fill: parent
        delegate: Column {
            TextField {
                text: display
            }
        }
    }
}

Answer 2

布局更改其子代的大小和位置。 但是，当我指定孩子的大小时，我只想更改职位。 为此使用了一个定位器（特别是用Column而不是ColumnLayout）。 另外，我还没有设置父版式（/ Positioner）的大小，因此现在使用anchors.fill：parent来设置。

    Column {
        anchors.fill: parent
        ScrollView
        {
            width: 150
            height: 150
            clip: true
            ListView {
                model: theModel
                anchors.fill: parent
                delegate: Column {
                    TextField {
                        text: display
                    }
                }
            }
        }
        Rectangle {
            color: "black"
            width: 100
            height: 30
        }
    }

感谢其他人的评论和回答，帮助我实现了这一目标！