如何在QML中创建交错的网格视图？

Question

我正在尝试为我的QML应用程序创建交错的网格视图，如下图所示。我尝试过使用QML Flow和QML Grid，但是它们都没有产生我想要的设计。

例如，当我使用QML Flow时，它导致行始终以相同的Y值开始。

Answer 1

我为我的应用程序项目仪表板实现了交错的网格视图（我称之为ColumnFlow），并将其放在GPLv3许可的单独库中。以下是它的外观：

ColumnFlow的源代码位于我的GitHub存储库iBeliever/ubuntu-ui-extras中。最初的实现是由我的库的一个分支中的另一个开发人员启动的，然后我将其拉回并进行了大量更改以使其按照我需要的方式工作。

您可以在sonrisesoftware/project-dashboard中找到有关如何使用它的各种示例，例如Settings page。

Answer 2

您是否已将Flow 容器的flow属性设置为 Flow.TopToBottom ？

在这种情况下，物品从上到下彼此相邻放置，直到超过Flow的高度，然后包裹到下一列。要获得垂直滚动行为，只需将Flow放入Flickable中。

在我看来，它与您尝试实现的目标非常接近。这是一个小例子（QtQuick 2.2）

Flickable
{
    anchors.fill: parent
    anchors.margins: 5
    contentHeight: flow.height

    Flow
    {
        id: flow
        width: parent.width
        height: 800
        spacing: 10
        flow: Flow.TopToBottom
        Repeater
        {
            model: [80,60,120,75,90,55,140,50,70,90,80,60,120,75,90]
            Rectangle
            {
                height: modelData
                width: 100
                border.color: "black"
            }
        }
    }
}