@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
}
}
}
