ListView isn't positioned in layout as expected - qt

Question

I have a ColumnLayout with a RowLayout in it. The RowLayout is positioned as expected. This is also true if the windows is being resized. Even if the windows is smaller than the entire ColumnLayout (see second image)
But if I replace the RowLayout by a (horizontal) ListView, this ListView is not positioned as I would expect. I would expect this behaves like the example with the RowLayout but the ListView is positioned higher:
And if the window gets 'to small' the blue rectangle 'moves into' the ListView unlike the first example:
How can I achieve the behaviour of the first example with a ListView?
Source
import QtQuick 2.0
import QtQuick.Layouts 1.1
Rectangle {
width: 360
height: 360
ColumnLayout {
anchors.fill: parent
anchors.margins: 20
Item {
Layout.fillHeight: true
}
/*
ListView {
Layout.fillHeight: true
Layout.fillWidth: true
orientation: ListView.Horizontal
spacing: 5
model: 3
delegate: Rectangle {
width: 50
height: 50
color: "red"
}
}
*/
RowLayout {
Layout.fillHeight: true
Layout.fillWidth: true
Rectangle {
width: 50
height: 50
color: "red"
}
Rectangle {
width: 50
height: 50
color: "red"
}
Rectangle {
width: 50
height: 50
color: "red"
}
}
Item {
Layout.fillHeight: true
}
Rectangle {
width: 50
height: 50
color: "blue"
}
}
}

Answer 1

You just need to define width and height for your ListView. In that way your column layout will consider its size and keep it as a fixed size.
Here your code updated:
import QtQuick 2.0
import QtQuick.Layouts 1.1
Rectangle {
width: 360
height: 360
ColumnLayout {
anchors.fill: parent
anchors.margins: 20
Item {
Layout.fillHeight: true
}
ListView {
//take as much width as possible with a binding
width: parent.width
//keep enought height to display each delegate instance
height: 50
orientation: ListView.Horizontal
spacing: 5
model: 3
delegate: Rectangle {
width: 50
height: 50
color: "red"
}
}
Item {
Layout.fillHeight: true
}
Rectangle {
width: 50
height: 50
color: "blue"
}
}
}