Why can't I use a ScrollView within a ColumnLayout?

Question

I have a ScrollView around a ListView. But when I put this in a ColumnLayout, the ListView disappears.

My actual code is larger and more complicated, but I've reduced the problem down to this small example.

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

Without the ColumnLayout and the Rectangle, I get a scrollable window showing part of the ListView as expected. But with them included, there is no sign of the ListView apart from some blank space above the rectangle.

Answer 1

A Qt Quick Layout resize all its children items (eg ColumnLayout resizes children's height, RowLayout resizes children's width), so you should use Layout attached property to indicate how to layout them, rather than setting the sizes. eg

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

A Layout changes the sizes and positions of its children. But as I was specifying the sizes of the children I only wanted to change the positions. A Positioner is used for this (specifically, a Column instead of a ColumnLayout). Additionally I had not set the size of the parent Layout (/Positioner), so I now do this with 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
        }
    }

Thanks to other's comment and answer for helping me realize this!