Qt QML listview layout does not resize

Question

I'm trying to create a listview that can be expanded or shortened by adding or removing rows. Realizing this was very simple, but the issue is that the ColumnLayout does not seem to reposition the items based on their new size.

Here is the minimal code to reproduce the issue

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

ApplicationWindow {
    id: window
    visible: true
    width: 630
    height: 891

    ListModel {
        id: productModel
        ListElement {
            description: "Test"
        }
        ListElement {
            description: "Other test"
        }              
    }

    ListModel {
        id: invoiceModel
        ListElement {
            description: "Factuur 6419"
        }
        ListElement {
            description: "Factuur 6491"
        }
    }

    ColumnLayout {
        width: 500

        ExpandingTable {
            width: 500
            model: productModel;
        }

        TextArea {
            placeholderText: "test"
        }

        ExpandingTable {
            width: 500
            model: invoiceModel;
        }
    }
}

And then a file called ExpandingTable.qml

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

ListView {
    id: listView
    height: contentHeight
    interactive: false

    delegate : RowLayout {
        width: parent.width;

        TextField {
            text: description
        }

        Button {
            text: "-"

            onClicked: {
                listView.model.remove(model.index)
            }
        }
    }

    Button {
        text: "+"
        anchors.left: listView.right
        anchors.bottom: listView.bottom

        onClicked: {
            listView.model.append({ description: "" })
        }
    }
}

I'm particularly unsure about the lines listView.model.remove(model.index) and listView.model.append({ description: "" }) And whether it should just be model. or actually be listview.model.

Answer 1

Your issue is related to ColumnLayout component. Just change it to old vanilla Column and be happy. If you want detailed explanation, read similar question: stackoverflow