ListView isn't positioned in layout as expected

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

score 3 · Answer 1 · answered Mar 05 '14 at 11:47

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

This works for this specific example. But what if the height of the delegate is dynamic? A hardcoded value for the ListView height would not work properly... That's because I tried Layout.fillHeight: true — avb, Mar 05 '14 at 13:03
I set the `ListView` `height` attribute to `childrenRect.height` - `height: childrenRect.height`. If each delegate instance has a concrete, positive `height` attribute ( as my use case does), then `childrenRect.height` seems to work. — Ross Rogers, Jul 26 '16 at 22:31

ListView isn't positioned in layout as expected

1 Answers1