List elements are not showing up in a vertical line - qt

Question

On Qt 5.9.4, I have a ListView with model and delegate like below:
Rectangle {
Column {
Image {
id: img0
source: "images/img0.png"
}
ListView {
model: ListModel {
ListElement {
dimName: "D top"
}
ListElement {
dimName: "D mid"
}
ListElement {
dimName: "D bot"
}
ListElement {
dimName: "H top"
}
ListElement {
dimName: "H bot"
}
}
delegate: RowLayout {
StyledLabel {
text: dimName
enabled: true
}
Rectangle {
}
SpinBox {
editable: true
enabled: true
from: 0
to: 1000
stepSize: 1
}
}
}
}
}
The ListView doesn't show the ListElements correctly. I mean all the elements are shown on top of each other, and on top of the Image item in the code, like this:
Can anybody give me a hint on how to show ListElements in a vertical line, one below the other.
UPDATE
as suggested by #Amfasis in a comment, I explicitly determined the height of ListView item:
height: parent.height + 100
anchors.top: img0.bottom
After above modification, now the list looks better:

Answer 1

You have to set the height of the RowLayout, but to set it explicitly is of course not nice. So you can use the height of the first child, or a different one if you wish (actually in your case this would be the SpinBox probably)
delegate: RowLayout {
anchors.left: parent.left
anchors.right: parent.right
//height: children[0].height
height: spinbox.height //actually better in your case
StyledLabel {
text: dimName
enabled: true
}
Rectangle { }
SpinBox {
id: spinbox
editable: true
enabled: true
from: 0
to: 1000
stepSize: 1
}
}
Even better would be to take the max of all children, but I'm not sure how that would be done best