Automatic row wrapping on elements in QML layout

Question

Is there a QML layout or some configuration that will automatically wrap QML items to the next row if the width of the next element exceeds the width of the specified layout?

When I use a QML GridLayout, the items just go off the edge of the window and are clipped:

GridLayout {
    id: header_focused_container;
    width: parent.width;
    anchors.margins: 20;
    Text {
        text: "header_focused_container.width=" + 
            header_focused_container.width + 
            " and my width is =" + width
    }
    Rectangle { height:20; width:250; color: "red" }
    Rectangle { height:20; width:250; color: "blue" }
    Rectangle { height:20; width:250; color: "green" }
}

When I look at Qt's documentation page labeled "Scalability" I see very manual scaling going on. Basically, they're suggesting that I compute the needed columns.

Is there some sort of layout type or configuration that will do auto-wrapping of the items?

Answer 1

You can use Flow:

import QtQuick 2.5
import QtQuick.Window 2.0

Window {
    visible: true
    width: 400
    height: 200

    Flow {
        id: header_focused_container
        anchors.fill: parent

        Text {
            text: "blah"
        }
        Rectangle { height:20; width:250; color: "red" }
        Rectangle { height:20; width:250; color: "blue" }
        Rectangle { height:20; width:250; color: "green" }
    }
}