Why does my QML ListView overlap my Text in a Column positioner? - qml

Question

A Column positioner is supposed to position its children in a column. But when one of the children is a ListView, I find it overlaps the other children.
When the children are just Text's there's no overlapping and everything is fine.
import QtQuick 2.11
import QtQuick.Window 2.11
Window {
visible: true
width: 640
height: 480
Column {
Text {
text: "Hello World"
}
// This works - appears under "Hello World"
Text {
text: "Hi Again"
}
// This doesn't - overlaps "Hello World" and "Hi Again"
ListModel {
id: theModel
ListElement { display: "one" }
ListElement { display: "two" }
ListElement { display: "three" }
}
ListView {
height:100
model: theModel
delegate: Text {
text: display
}
}
}
}
Expected result: Listview appears under "Hi Again"
Actual result: ListView overlaps "Hello World" and "Hi Again"
I often come a cropper with overlapping items in QML. Am I missing something fundamental that someone can explain to me? I'm having trouble finding a good reference book for QML positioning.

Answer 1

The Column (and other positioners for that matter) will not position items that are deemed invisible, the definition being height and width above zero and visible = false. This means you can easily solve it by anchoring the ListView to the left and right of it's parent:
ListView {
height:100
anchors.left: parent.left
anchors.right: parent.right
Component.onCompleted: console.log(implicitHeight, implicitWidth)
model: theModel
delegate: Text {
text: display
}
}