具有居中内容的流程布局

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