Center Flow Content Layout

Question

I have a row with elements that should fold when the window width is too small to display all the elements in the row, as shown in the following sketch:

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

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

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

Answer 1

Well there is no built-in way, but I found a workaround for this.

The idea is simple, since Flow already Item it is anchors.leftMargin and anchors.rightMargin . Therefore, if we can calculate how many elements are inside the Flow line, then we can calculate the left and right fields. Therefore, we can focus.

Here 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 2

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

No.

You can do the math to check if the last "line" in Flow , and then add some spacer elements to the left and right of the elements in that line. You should use some C ++, though probably; namely, QQuickItem::stackBefore() and QQuickItem::stackAfter() , to reposition the spacer elements in the list of Flow children. The width of each spacer element would be half the remaining space inside this line. This is not very, but it should work.

Answer 3

I do not think there is a built-in way to do this. You must create your own item.