Automatic row wrapping on elements in QML layout - qml

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 need 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" }
}
}