qml - 内容居中的流式布局

Question

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

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

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

QML 中是否有内置方法使流程居中？

Answer 1

嗯，没有内置的方法，但我找到了一个解决方法。

这个想法很简单，因为 Flow已经是Item它有anchors.leftMargin和 anchors.rightMargin 。因此，如果我们可以计算Flow的行内有多少元素，那么我们就可以计算左右边距。这样我们就可以集中精力。

这是一个简单的代码，

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