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

Answer 2

Qml中是否有内置方式使流量居中？

没有

你可以做数学运算来检查最后一行＆＃34;行＆＃34; Flow中的var ids = [1,2,3]; doPromise(1).then(function(){ doPromise(2).then(function(){ doPromise(3); } })未满，然后在该行的项目的左侧和右侧添加一些间隔项。你可能不得不使用一些C ++;即QQuickItem::stackBefore()和QQuickItem::stackAfter()，以便在RealmMigration migration = new RealmMigration() { @Override public long execute(Realm realm, long version); if (version == 1) { Table table = realm.getTable(Foo.class); long keyIndex = table.getColumnIndex("id"); table.addSearchIndex(keyIndex); version++; } return version; } };的子项列表中重新定位spacer。每个间隔项的宽度将是该行内剩余空间的一半。它不漂亮，但它应该有用。

Answer 3

我认为没有任何内置方法可以这样做。你必须制作自己的元素。

Answer 4

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{

    }
}

具有居中内容的流程布局

4 个答案: