今天在網上看到一些同學說QML 的佈局不好用， GridLayout 不像 Qt C++ 中的一樣，可以自動拉伸，其實在QML 中也是可以的，只是姿勢不對而已，先看程式碼。

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，不知道 Component 的可以去看我另一篇 部落格，接下來我們再建立了一個GridLayout 的佈局，在裡面用 Loader 載入了4 個我們上面建立的紅色元件 red，再使用屬性Layout.fillWidth 與Layout.fillHeight填充我們的佈局，接下來我們可以用 qmlscene，或者直接在工程裡面跑一遍，拉伸一下視窗，就會發現元件會隨著視窗的改變而改變了。

       其實很多同學說GridLayout 不能自動拉伸，是因為沒有設定Layout.fillHeight和 Layout.fillWidth這兩個屬性，而且記得哦，設定了這兩個屬性就不要再設定 width和height這兩個屬性咯。