Qml 以内容为中心的流程布局

我有一行项目，当窗口宽度太小，无法显示一行中的所有项目时，这些项目应该堆叠起来，如下图所示：

Flow

组件堆叠项目，但它们不居中，而是在左侧或右侧对齐：

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

QML中是否有一种内置的方法使流居中

Qml中是否有一种内置的方法使流居中

没有

---

您可以进行数学运算，检查

流中的最后一行是否未满，然后在该行项目的左侧和右侧添加一些间隔项。你可能不得不使用一些C++，但是可能；即，在
流的子项列表中重新定位间隔项。每个间隔项的宽度为该行剩余空间的一半。它不漂亮，但应该能用。
我认为没有任何内在的方法可以做到这一点。您必须创建自己的元素。
没有内置的方法，但我找到了一个解决方法

这个想法很简单，因为它已经是一个。因此，如果我们可以计算，在
流的行中有多少个元素，那么我们就可以计算左右边距。所以我们可以集中精力

这是一个简单的代码

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

CenterFlow.qml

import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.3

Rectangle{
    implicitHeight: elements.height
    default property alias content: elements.children
    property int flowSpacing: 0
    color: "transparent"
    Flow{
        function mar(){
            var rowCount = parent.width / (elements.children[0].width + flowSpacing);
            if(rowCount> elements.children.length){
                rowCount = elements.children.length
            }
            rowCount = parseInt(rowCount)
            var rowWidth = rowCount * elements.children[0].width + (rowCount - 1) * flowSpacing
            print(elements.height)
            return (parent.width - rowWidth) / 2

        }
        spacing: flowSpacing
        id:elements
        leftPadding: mar()
        rightPadding: mar()
        width: parent.width
    }
}


像这样使用它：

CenterFlow {
     id:centerFlow
     flowSpacing: 10
     width: parent.width -10*2

     Button{

     }
     Button{

    }
}