Flow component with elements flowing from center

[NaLogo]

Hello everyone,

I would like to create a Flow element that takes some amount of elements with different widths and makes them flow from the center on each row.

Here's an amazing example I drew to show what I mean.

Here the element gets three elements and since all three of them don't fit within the width of the container, the third one gets pushed to a new row. But all of them "originate" from the center.

I can't really figure it out. I tried using anchors on the Flow element but that doesn't really work when it's supposed to fill the width of the container.

Does anyone have any ideas?

[ODБOï]

@NaLogo hi
Im not sure this is exactly what you want

You can calculate the number of items in the row, create containers with the right size to make the items centered (dividing the avalable space by the number of items), then put your items in the center of the containers

import QtQuick
import QtQuick.Window
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

Window {
    id:w
    width: 640
    height: 480
    visible: true
    property var randomWidths : []
    property int columnNumber: 3
    property int rowsNumber: repeater.count / columnNumber

    Component.onCompleted: {
        for(var i = 0; i < 16; i++){
            randomWidths[i] = Math.random() * (w.width/3)
        }
        repeater.model++
    }

    Flow {
        id: flow
        anchors.fill: parent

        Repeater {
            id: repeater
            model:5
            delegate: Rectangle { //CONTAINER
                property int row: Math.floor(index / columnNumber)
                property int itemsCount: getItemsCount()

                function getItemsCount(){
                    if(row< rowsNumber)
                        return columnNumber
                    else
                        return repeater.count % columnNumber
                }

                width: Math.floor(flow.width / itemsCount)
                height: 80
                // uncomment these 2 lines to see the borders of the container
                //border.width: 1
                //border.color: "red" 

                Rectangle{ // your items
                    height: parent.height/2
                    width: randomWidths[index]  //Math.random()*(w.width/3)
                    border.width: 1
                    anchors.centerIn: parent
                    Text {
                        text: qsTr("item %1").arg(index)
                        anchors.centerIn: parent
                    }

                }

            }
        }
    }

    RowLayout{
        anchors.bottom: parent.bottom
        width: parent.width
        Button{
            text: "-"
            onClicked: {if(repeater.model > 0)repeater.model-- }
            Layout.fillWidth : true
        }
        Button{
            text: "+"
            onClicked: { if(repeater.model<randomWidths.length)repeater.model++}
            Layout.fillWidth : true
        }
    }
}