ListView changes size when placed on Page with header

Justin Steventon

Hi all,

I have a small (self-contained) snippet of QML which has a bug that I am having trouble diagnosing.

To reproduce the issue:

Scroll to the bottom of the page
Click the last list item
Click the back button

The result is that the list view scroll position on the first page is incorrect. It is offset by the height of the header.

Some other points:

If I listen to the ListView onHeightChanged event, then this is called when changing pages. This is what seems to be the cause.
The problem does not occur if I remove the Page header.

Any idea what I am doing wrong?

Thanks!

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Component {
        id: page1
        Page {
            header: ToolBar {}
            ListView {
                anchors.fill: parent
                model: 30
                delegate: ItemDelegate {
                    width: parent.width
                    text: model.index
                    onClicked: stackView.push(page2)
                    font.pixelSize: 20
                    contentItem: RowLayout {
                        ColumnLayout {
                            Layout.fillWidth: true
                            Label {
                                text: "Hello"
                            }
                            Label {
                                text: "There_" + model.index
                            }
                        }
                    }
                }
            }
        }
    }

    Component {
        id: page2
        Page {
            header: ToolBar {}
            Button {
                anchors.centerIn: parent
                width: 100
                height: 100
                text: "Back"
                onClicked: stackView.pop()
            }
        }
    }

    StackView {
        id: stackView
        anchors.fill: parent
        initialItem: page1
    }
}

Yunus

Because your ListView is connected to parent's width and height. If you arrange width and height by manual, it ll be fixed. You can change listview with this:

ListView {
                //anchors.fill: parent
                width: 480
                height: 420
                model: 30
                delegate: ItemDelegate {
                    width: parent.width
                    text: model.index
                    onClicked: stackView.push(page2)
                    font.pixelSize: 20
                    contentItem: RowLayout {
                        ColumnLayout {
                            Layout.fillWidth: true
                            Label {
                                text: "Hello"
                            }
                            Label {
                                text: "There_" + model.index
                            }
                        }
                    }
                }
            }

GrecKo

@Justin-Steventon said in ListView changes size when placed on Page with header:

The result is that the list view scroll position on the first page is incorrect. It is offset by the height of the header.

I do not reproduce the problem on linux with Qt 5.15

Justin Steventon

@GrecKo thanks, I am on 5.12.6. I will try out 5.15.

Justin Steventon

@GrecKo this problem still occurs on 5.15 with Windows MSVC 19 x64.

Justin Steventon

@Yunus this works. My ListView is a reusable component, so it would be nice if this worked more generally. Do you know if there is there a way of mimicing the effect of "anchors.fill: parent" without creating the side-effect? Thanks!

Justin Steventon

@Justin-Steventon I am going to mark this as resolved. The final solution, which at least handles the scenarios I am interested in:

ListView {
    width: parent.width
    Component.onCompleted: height = parent.height
    Connections {
        target: appWindow    // main app window
        onHeightChanged: listView.height = parent.height
    }

...
}