Problems with Open-Source Downloads read https://www.qt.io/blog/problem-with-open-source-downloads and https://forum.qt.io/post/638946

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 a minimumWidth and a maximumWidth.
    • How would I start implementing a custom QML layout? I've looked at the source code of the ColumnLayout for inspiration, but the QQuickLayout which I probably have to implement is private.