Reputation: 1
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.
Upvotes: 0
Views: 20