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

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.