在QML布局中自动换行元素

Question

如果下一个元素的宽度超过指定布局的宽度，是否有QML布局或某些配置会自动将QML项目包装到下一行？

当我使用QML GridLayout时，这些项目会从窗口边缘移开并被裁剪：

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

当我查看Qt的标有"Scalability"的文档页面时，我看到非常手动缩放。基本上，他们建议我需要计算所需的列。

是否有某种布局类型或配置会对项目进行自动换行？

Answer 1

您可以使用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" }
    }
}