qml中的布局如何使用 请给出完整示例

在QML（Qt Quick Markup Language）中，布局是非常重要的，它帮助你组织UI元素并管理它们在屏幕上的位置。Qt Quick提供了多种内置的布局系统，包括`StackLayout`、`GridLayout`、`ColumnLayout`和`RowLayout`等。这里提供一个完整的`ColumnLayout`和`GridLayout`的使用示例：

### 1. ColumnLayout (垂直布局)

import QtQuick 2.0
import QtQuick.Controls 2.0

Window {
    width: 600
    height: 400
    title: "使用ColumnLayout"

    ColumnLayout {
        id: columnLayout
        anchors.fill: parent // 填充整个窗口

        // 添加两个按钮到列布局
        Row {
            Text { text: "Button 1" }
            Button { text: "按钮1" }
        }

        Row {
            Text { text: "Button 2" }
            Button { text: "按钮2" }
        }
    }
}

在这个例子中，每个`Row`将水平排列，并按顺序垂直堆叠在`ColumnLayout`里。

### 2. GridLayout (网格布局)

import QtQuick 2.0
import QtQuick.Controls 2.0

Window {
    width: 600
    height: 400
    title: "使用GridLayout"

    GridLayout {
        id: gridLayout
        rows: 2 // 两行
        columns: 2 // 两列
        cellWidth: 100 // 每个单元格的宽度
        cellHeight: 50 // 每个单元格的高度

        // 添加四个按钮到网格布局
        Rectangle {
            width: 100; height: 50
            color: "lightblue"
            Text { text: "Button 1" }
        }
        Rectangle {
            // 其他按钮...
        }
        // 更多按钮...
    }
}

这个例子中，按钮会被均匀分布在2x2网格中。