QML 布局管理器之GridLayout

一.QML GridLayout介绍

在QML中，GridLayout是一种用于布局元素的容器。它允许您以网格形式组织和排列元素。要使用rowspan、columnspan、layoutFillWidth和rowSpacing属性，您可以将一个元素跨越多行和多列，并填充整个宽度，同时设置行间距。

可以使用下列附加属性:
Layout.row

Layout.column

Layout.rowSpan

Layout.columnSpan

Layout.minimumWidth

Layout.minimumHeight

Layout.preferredWidth

Layout.preferredHeight

Layout.maximumWidth

Layout.maximumHeight

Layout.fillWidth

Layout.fillHeight

Layout.alignment
单单从名字上就可以看出这些附加属性的用途了。

 二.QML GridLayout使用示例

//下面是一个使用GridLayout的示例，其中包含一个跨越两行两列的元素，填充整个宽度，并设置了行间距：
import QtQuick 2.0
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.12
 
Window
{
    visible: true
    width: 400
    height: 300
    title: qsTr("Hello World")
 
    GridLayout
    {
        anchors.fill: parent
        columns: 3
        rows: 3
        rowSpacing: 10 // 设置行间距为10像素
 
        Button {
            text: "Button 1"
        }
        Button {
            text: "Button 2"
        }
        Button {
            text: "Button 3"
        }
        Button {
            text: "Button 4"
            Layout.rowSpan: 2 // 将该按钮跨越两行
            Layout.columnSpan: 2 // 将该按钮跨越两列
            Layout.fillWidth: true // 填充整个宽度
        }
        Button {
            text: "Button 5"
        }
        Button {
            text: "Button 6"
        }
    }
}

 在上面的示例中，我们创建了一个包含三行三列的网格布局，并在每个单元格中放置了一个按钮。通过设置rowspan: 2和columnspan: 2，我们将第四个按钮跨越了两行和两列。同时，通过设置Layout.fillWidth: true，我们将该按钮填充了整个宽度。最后，通过设置rowSpacing: 10，我们设置了行间距为10像素。

请注意，当您使用rowspan、columnspan、layoutFillWidth和rowSpacing属性时，需要确保其他元素有足够的空间来适应新的布局。否则，可能会出现布局错误或元素重叠的情况。

运行结果：