QML GridLayout 拉伸填满布局

import QtQuick 2.0
import QtQuick.Layouts 1.3

Rectangle {
    width: 320;
    height: 240;
    color: "#00EEEE";

    //一个红色矩形组件
    Component {
        id: red
        Rectangle {
            color: "red"
        }
    }

    //网格布局
    GridLayout {
        anchors.fill: parent
        anchors.margins: 10
        rows: 3
        columns: 2
        rowSpacing :10
        columnSpacing : 10

        Loader {
            //填满布局的宽
            Layout.fillWidth: true
            //填满布局的高
            Layout.fillHeight: true
            //装载组件
            sourceComponent: red
        }

        Loader {
            Layout.fillWidth: true
            Layout.fillHeight: true
            sourceComponent: red
        }

        Loader {
            Layout.fillWidth: true
            Layout.fillHeight: true
            sourceComponent: red
        }

        Loader {
            Layout.fillWidth: true
            Layout.fillHeight: true
            sourceComponent: red
        }
    }
}

利用Component 创建一个红色矩形组件red，再创建了一个GridLayout 的布局，在里面用 Loader 加载了4 个我们上面创建的红色组件 red，再使用属性Layout.fillWidth 与Layout.fillHeight填充我们的布局，接下来我们可以用 qmlscene，或者直接在工程里面跑一遍，拉伸一下窗口，就会发现组件会随着窗口的改变而改变了。

注意：设置了Layout.fillHeight和 Layout.fillWidth这两个属性，就不要再设置 width 和 height 这两个属性了。

QML Component 内嵌使用方式