Implement custom QML FlowLayout
-
Cheers everyone,
I'm looking for some pointers on how to implement a FlowLayout in QML.
The Flow positioner looked promising, however, it does not fully meet the requirements I have.Here is what I want to do:
I have a couple of items which should be shown like the Flow positioner does it: If there is not enough space in a row, the next items should be displayed in the next row.
Contrary to the Flow positioner, I would like the items to take all the available space, they should fill the width of the layout.So I'd imagine implementing a custom FlowLayout. This layout would check how many items would fit in a certain row based on their minimum/preferred widths. It would then layout the items in this row based on the preferred/maximum widths.
Example
Imagine I have the following items with the [minimum/maximum] widths:- Item0 [100,200]
- Item1 [100,200]
- Item2 [100,200]
If my FlowLayout had width 150, I would like them to be layouted like this:
[Item0 width 150]
[Item1 width 150]
[Item2 width 150]If my FlowLayout had width 250, I would like them to be layouted like this:
[Item0 width 125][Item1 width 125]
[Item2 width 200]So basically, my questions are:
- Can this be done with the Flow positioner? My guess would be no, because an Item in a Positioner only has a
width
, and I would need both aminimumWidth
and amaximumWidth
. - How would I start implementing a custom QML layout? I've looked at the source code of the
ColumnLayout
for inspiration, but theQQuickLayout
which I probably have to implement is private.