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

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

是否有某种布局类型或配置可以自动换行项目？

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