qmlqt5qtquick2

Automatic row wrapping on elements in QML layout


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

Gridlayout efforts[1]

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?


Solution

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