Qml ListView dynamic height item transition

Question

I am having a problem with qml listview and dynamic height of items. My task is to show a list of items, that can have a different height value based on a flow item in it.

When I use transition, it moves my items on a wrong distance.

I am getting this outcome:

enter image description here

But i want this:

enter image description here

I think, that problem lays in default height of items in ListView, but I do not quite understand how to change this offset.

And if this problem could be solved, what should I do if all items will have different amought of items in flow object? Is this problem even possible to solve easily?

main.qml file:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    width: 640
    height: 480
    visible: true

    Rectangle {
        id: rectangle
        color: "#ffffff"
        anchors.fill: parent

        Rectangle {
            id: rectangle1
            height: 50
            color: "#ffffff"
            border.color: "#000000"
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.topMargin: 5
            anchors.rightMargin: 5
            anchors.leftMargin: 5


            Row {
                id: row
                anchors.fill: parent
                anchors.rightMargin: 1
                anchors.leftMargin: 1
                anchors.bottomMargin: 1
                anchors.topMargin: 1
                spacing: 5

                Button {
                    id: button
                    width: 50
                    text: qsTr("Insert")
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 0
                    anchors.topMargin: 0

                    onClicked: {
                        list_model.insert(0, {'name': 'Inserted'})
                    }
                }

                Button {
                    id: button1
                    width: 50
                    text: qsTr("Append")
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 0
                    anchors.topMargin: 0

                    onClicked: {
                        list_model.append({'name': 'Appended'})
                    }
                }

                Text {
                    text: listView.contentHeight
                }
            }
        }

        Rectangle {
            id: rectangle2
            color: "#ffffff"
            border.width: 1
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: rectangle1.bottom
            anchors.bottom: parent.bottom
            anchors.margins: 5

            ListView {
                id: listView
                anchors.fill: parent
                anchors.margins: 5
                clip: true
                spacing: 5
                model: ListModel {
                    id: list_model
                    ListElement {}
                    ListElement {}

                } // ListModel id: list_model
                delegate: ItemExample {  }

                add: Transition {
                    NumberAnimation { properties: "y"; from: -100; duration: 300 }
                }
                addDisplaced: Transition {
                    NumberAnimation { properties: "y"; duration: 300 }
                }
            }
        }
    }
}

and ItemExample.qml file:

import QtQuick 2.0
import QtQuick.Layouts 1.11
import QtQuick.Controls 2.15


Item {
    id: item1
    width: parent.width
    height : flow1.childrenRect.height

    Rectangle {
        id: rectangle
        anchors.fill: parent
        color: 'Grey'
        border.width: 1

        RowLayout {
            id: row
            anchors.fill: parent
            anchors.rightMargin: 2
            anchors.leftMargin: 2
            anchors.bottomMargin: 2
            anchors.topMargin: 2

            Text {
                text: flow1.childrenRect.height
            }

            Flow {
                id: flow1
                clip: true
                spacing: 5
                Layout.fillWidth: true
                Layout.fillHeight: true

                Repeater {
                    model: 3
                    Rectangle {
                        width: 150; height: 50
                        border.width: 1
                        color: "yellow"
                    }
                }
            }
        }//RowLayout
    }
} //Item

score 1 · Accepted Answer · answered Mar 26 '21 at 10:52

Answering that question by myself.

The problem, as mentioned, was in default size of flow object.

I have needed to force flow object layout before item itself, to know exact height of that item.

Item {
    id: item1

    ListView.onAdd: {
        flow1.forceLayout()
        height = flow1.childrenRect.height
    
    -||-
}

Hope that will help someone in the future!

Qml ListView dynamic height item transition

1 Answers1