How does one create a staggered grid view in QML?

Question

I am trying to create a staggered grid view for my QML application as shown in the image below. I have tried using QML Flow and QML Grid, however both of them don't result in the design I want.

For instance when I used QML Flow, it resulted in where the rows always start at the same Y value.

Answer 1

Did you set the flow property of your Flow container to Flow.TopToBottom ?

When it is the case, items are positioned next to each other from top to bottom until the height of the Flow is exceeded, then wrapped to the next column. To get the vertical scrolling behavior, just put your Flow in a Flickable.

Seems to me that it's pretty close to what you're trying to achieve. Here's a small working example (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"
            }
        }
    }
}

Answer 2

I implemented a staggered grid view (what I call a ColumnFlow) for my app Project Dashboard, and have it in a separate library licensed under the GPLv3. Here is how it looks:

The source code for ColumnFlow is in my GitHub repository iBeliever/ubuntu-ui-extras. The original implementation was started by another developer in a fork of my library, which I then pulled back in and made huge changes to get it to work the way I needed it to.

You can find various examples of how to use it in sonrisesoftware/project-dashboard, for example the Settings page.