Flow layout with centered content

Question

I have a row with items which should stack when the window width gets too small for displaying all items in a row, as shown in the following sketch:

The Flow component stacks the items but they are not centered but aligned on the left or right side:

Flow {
    Item {}
    Item {}
    Item {}
    Item {}
    Item {}
}

Is there a built-in way in QML to make the flow centered?

Answer 1

Is there a built-in way in Qml to make the flow centered?

No.

You can do the maths to check if the last "row" in the Flow is not full, and then add some spacer items to the left and right of the items in that row. You'd have to use some C++ though, probably; namely QQuickItem::stackBefore() and QQuickItem::stackAfter() to reposition the spacer items within the list of children of the Flow. The width of each spacer item would be half of the remaining space within that row. It's not pretty, but it should work.

Answer 2

Well there is no built-in way but I found a workaround to do it.

The idea is simple, since Flow is already an Item it has anchors.leftMargin and anchors.rightMargin. So if we can calculate, how many elements is inside the row of theFlow then we are able to calculate the left and right margins. So we can center in.

Here it is a simple code,

        Flow {
        property int rowCount: parent.width / (elements.itemAt(0).width + spacing)
        property int rowWidth: rowCount * elements.itemAt(0).width + (rowCount - 1) * spacing
        property int mar: (parent.width - rowWidth) / 2

        anchors {
            fill: parent
            leftMargin: mar
            rightMargin: mar
        }

        spacing: 6
        Repeater {
            id: elements
            model: 5
            Rectangle {
                color: "#aa6666"
                width: 100; height: 100
            }
        }

Answer 3

I don't think there is any built-in way to do so. You have to make your own element.