I am working with a QML Flow layout in which I dynamically adjust the height of a delegate (Rectangle with id: zakaz) when a button is pressed. This expansion works as intended, pushing the delegate directly below it downward, which is expected. However, the problem is that the delegate next to the expanding one also shifts down as if it were below the expanding delegate, not beside it.

Is there a way to prevent this side-shift behavior, or is it an inherent characteristic of using Flow in QML? Here is the relevant part of my code:

import QtQuick 2.15 
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import Qt5Compat.GraphicalEffects
import QtQuick.VirtualKeyboard 2.15
import QtQuick.VirtualKeyboard.Settings 2.15
import QtQuick.Controls.Universal 2.15

Flickable {
id: flickable
contentWidth: parent.width 
contentHeight: flow.height 
clip: true

Flow {
    id: flow
    width: flickable.width
    spacing: 20
    padding: 20
    Layout.fillHeight: true

    Repeater {
        model: ContactModel{}
        delegate: Rectangle {
            id: zakaz
            width: flow.width / 2 - 30
            height: nmbr.implicitHeight + soder.implicitHeight + 12
            state: ""

            // Components inside the delegate
            // ... other components like nmbr, soder, txttools

            states: [
                State {
                    name: "expanded"
                    PropertyChanges {
                        target: zakaz
                        height: nmbr.implicitHeight + soder.implicitHeight + 12 + tools.height
                    }
                    PropertyChanges {
                        target: tools
                        opacity: 1
                    }
                }
            ]

            transitions: [
                Transition {
                    NumberAnimation { properties: "height"; duration: 300 }
                    NumberAnimation { target: tools; property: "opacity"; duration: 100 }
                }
            ]
        }
    }
}

}

We attempted to resolve the issue with Flow by creating two RowLayouts, each containing a ColumnLayout. In these ColumnLayouts, delegates were placed such that delegates with even indices were on the right and those with odd indices on the left. This setup was implemented to avoid duplicating delegates since they all shared the same model.