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

Question

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

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

Answer 1

我为我的应用 Project Dashboard 实现了一个交错网格视图（我称之为 ColumnFlow），并将它放在一个单独的库中，根据 GPLv3 获得许可。这是它的外观：

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

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

Answer 2

您是否将 Flow container 的 flow 属性设置为 Flow.TopToBottom ？

在这种情况下，item从上到下并排放置，直到超过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"
            }
        }
    }
}