Reverse Layout Order of Flow - qml

Question

I'd like to have Flow in which the objects are added from the left to the right, but each row is aligned to the right.
import QtQuick 2.0
import QtQuick.Controls 2.0
Flow {
width: 400
anchors.right: parent.right
spacing: 2
Repeater {
model: ['a', 'b', 'c', 'd', 'e', 'f', 'g']
delegate: Button {
text: modelData
width: (83 * (model.index + 1)) % 100 + 30
}
}
}
I have the Flow aligned to the right, but the rows in it will always start at the Flows left edge. I could set
layoutDirection: Qt.RightToLeft
which would align the rows to the right, but the order of the items would be reversed as well.
If I reverse the model (in this example possible by calling reverse(), with a ListModel I would need a reversing ProxyModel) a would be to the left, but the rows are out of order.
How could I achive something like that?

Answer 1

import QtQuick 2.5
import QtQuick.Controls 2.1
ApplicationWindow {
id: root;
width: 640
height: 480
visible: true
Rectangle {
z: -1
color: "#80000000"
width: flow.width
height: flow.height
anchors.centerIn: flow
}
Flow {
id: flow
width: 400
anchors.right: parent.right
spacing: 2
Repeater {
id: repeater
property real remainingRowSpace: flow.width
property real indexOfFirstItemInLastRow: 0
model: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q']
delegate: Rectangle {
property real buttonWidth: (83 * (model.index + 1)) % 100 + 30
color: "#80000000"
width: buttonWidth
height: childrenRect.height
Button {
x: parent.width - width
text: modelData
width: parent.buttonWidth
}
}
onItemAdded: {
var spacing = parent.spacing
// Check if new row.
if (item.width > remainingRowSpace) {
// Increase width of first item push row right.
itemAt(indexOfFirstItemInLastRow).width += remainingRowSpace
// Reset available space
remainingRowSpace = parent.width
// Store index of item
indexOfFirstItemInLastRow = index
// Don't need to subtract spacing for the first item
spacing = 0
}
remainingRowSpace -= (item.width + spacing)
// Handle when no more rows will be created.
if (index === repeater.count - 1) {
itemAt(indexOfFirstItemInLastRow).width += remainingRowSpace
}
}
}
}
}
It's not a very versatile or dynamic solution, but it works.

Answer 2

This is still a work in progress but might still be usable for some people
Just as the solution of Tony Clifton, it uses a Repeater and it's onItemAdded-method, but uses Qt.binding to keep things more dynamic. It is not superior to Tony Cliftons solution and the choice might depend on the usecase.
Upsides:
Dynamic to changes of the individual Item-width
Dynamic to the width of the ReversedFlow
Downsides:
Fills the bottom row first. First row might not be full (for some usecases this might be better)
Both solutions wont work, when used with a ListModel and a new entry is being insert()ed. Both solutions should work, when the model is completly replaced (e.g with JSArrays and a manual call of modelChanged()).
Both solutions are no Flows in the sense, that you can throw in arbitrary objects as a Repeater takes care of the layout. So the Repeater has to create the Items. I did not get it working with an ObjectModel. Getting rid of the Repeater will be my last concern.
Item {
id: root
visible: false
width: 400
height: (rep.count > 0 ? rep.itemAt(0).y * -1 : 0)
anchors.centerIn: parent
property real spacing: 5
Item {
anchors.bottom: parent.bottom
anchors.right: parent.right
anchors.left: parent.left
Repeater {
id: rep
model: ListModel {
id: bm
ListElement { text: "a" }
ListElement { text: "b" }
ListElement { text: "c" }
ListElement { text: "d" }
ListElement { text: "e" }
ListElement { text: "f" }
ListElement { text: "g" }
ListElement { text: "h" }
ListElement { text: "i" }
}
onItemAdded: {
console.log(index, item, itemAt(index - 1))
item.anchors.right = Qt.binding(
function() {
if (rep.count === index + 1) return parent.right
var neighbor = rep.itemAt(index + 1)
if (neighbor.x - item.width - root.spacing < 0) return parent.right
return rep.itemAt(index + 1).left
}
)
item.anchors.bottom = Qt.binding(
function() {
if (rep.count === index + 1) return parent.bottom
var neighbor = rep.itemAt(index + 1)
if (neighbor.x - item.width - root.spacing < 0)
return neighbor.top
return neighbor.bottom
}
)
item.anchors.rightMargin = Qt.binding(
function() {
return (item.anchors.right === parent.right ? 0 : root.spacing)
}
)
item.anchors.bottomMargin = Qt.binding(
function() {
return (item.anchors.bottom === rep.itemAt(index + 1).top ? root.spacing : 0)
}
)
}
delegate: Button {
text: modelData
property int count: 0
width: (83 * (index + count + 1)) % 100 + 30
onClicked: {
count++
}
}
}
}
Rectangle {
id: debug
anchors.fill: parent
color: 'transparent'
border.color: 'red'
}
}
The idea behind this, is to initialize bindings of the anchors when the objects are added, where I anchor each Item to either the right side or it's successor, if there is enough space.
I also anchor the bottom of the Item to it's successors bottom, if it is next to him, or to it's top, if it starts a new row. If it has no successor, it will be anchored to the bottom of the parent.
The latter fact, makes this strange construct with two enclosing Items necessary. The outer on will really enclose everything, and dynamically grow, but this can't be the one, I anchor the whole chain to, as I anchor to the bottom. If I would change the height depending on the childrenRect.height I would end in a binding loop with strange effects, as the y-values of the Items would not stay constant. Initially it would work, but when the the items move due to size changes, it would break.