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 文档页面时，我看到正在进行的手动缩放。基本上，他们建议我计算所需的列。

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

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