Flow component with elements flowing from center
-
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?
-
@NaLogo hi
Im not sure this is exactly what you wantYou 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 } } }