In a “normal” QML ListView, typically, all elements have the same width; essentially, the width of the ListView. I had a use case in which I wanted to be able to display multiply elements side by side as well as have the classic “full-width” elements. Moreover, in my particular use case, I wanted to have the chance to have items of arbitrary size, with maximum width being the width of the ListView.

So, neither the “normal” QML ListView nor the QML GridView were viable options. Thus, I was looking for a way on how to realize what fulfills my requirements. During this search I stumbled across the QML Tag Cloud example. The interesting point in this example, with respect to my problem, is that it shows how to combine a Repeater, a Flow element, and a Flickable in order to display more or less arbitrarily sized items based on elements of a ListModel in a pretty much freely placed flow layout.

For the QML FlowListView I also used the above combination of Flickable, Flow, and Repeater. The result is a ListView like view that can be used to display a ListModel. Selecting, adding, and removing items is also supported. Below is a screenshot of an example application.

The source code of this example and the FlowListView element is released under the terms of the LGPL. You can get both from github.

As a small appetizer: the upcoming version of Q To-Do will make use of this new FlowListView. 😉