QML FlowListView

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. 😉

This entry was posted in Announcements, Qt/QML and tagged , , . Bookmark the permalink.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.