qml gridlayout

### QML 中使用 `GridLayout` 进行布局

在 QML 中，`GridLayout` 是一种强大的布局管理器，允许开发者创建复杂的网格结构来安排子项的位置和大小[^2]。

#### 基本语法与属性介绍

`GridLayout` 可以通过指定每一项所在的行列位置以及跨越多少行或列来进行精确控制。常用属性包括：

- **columns**: 设置网格中的总列数
- **rows**: 设置网格中的总行数 (可选)
- **columnSpacing / rowSpacing**: 控制各单元格之间的间距
- **Layout.alignment**: 调整项目在其分配空间内的对齐方式

#### 示例代码展示

下面是一个简单的 `GridLayout` 使用案例，展示了如何在一个窗口内布置多个按钮并调整它们的相对位置：

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Window {
    visible: true
    width: 600; height: 480
    
    GridLayout { // 创建一个 Grid Layout 实例
        anchors.fill: parent
        
        columns: 3 // 设定三列表格
        columnSpacing: 10; rowSpacing: 10 // 单元间留白距离设定

        Button {
            text: "Button 1"
            Layout.column: 0
            Layout.row: 0
        }

        Button {
            text: "Button 2"
            Layout.column: 1
            Layout.row: 0
        }
        
        Item { // 空占位符用于保持其他组件居中显示
            Layout.column: 2
            Layout.row: 0
            Layout.preferredWidth: 0
            Layout.preferredHeight: 0
        }

        Button {
            text: "Button 3"
            Layout.columnSpan: 3 // 此按钮横跨整个宽度
            Layout.row: 1
        }
    }
}

此示例说明了如何利用 `GridLayout` 的灵活性构建响应式的用户界面，同时确保各个控件按照预期排列。