今天深入理解的是两个网格布局容器，可以在垂直或水平方向上创建多列或多行的排列。但在深入理解LazyVGrid和LazyHGrid之前，我们需要先学习一下GridItem网格布局项，因为我们是通过网格布局项来配置的LazyVGrid和LazyHGrid。

GridItem网格布局项

GridItem是什么？

GridItem是网格布局中的一项，用于定义每个单元格的大小和布局规则。例如，需要在视图中创建网格时，可以设置一组GridItem来定义列或行的宽度、间距等属性。

GridItem主要的属性有哪些？

1. 大小模式（size）：可以通过三种模式来设置单元格的大小行为。
2. 间距（spacing）：定义每个单元格之间的间距，默认系统会自动设置一个合适的值。
3. 对齐（alignment）：定义单元格内部设置的对齐方式。

GridItem.size的三种主要模式

1、固定大小的单元格

.fixed(_:)

强制要求单元格的宽度或告诉为固定值，不会随着屏幕大小变化。

GridItem(.fixed(80))    // 每个单元格的宽度/高度都是80点，不会随着总宽度变化。

2、可伸缩的单元格，允许单元大小在一定范围内变化。

.flexible(minimum:maximum)

可以指定最小和最大尺寸，系统会根据可用空间调整单元格大小。

GridItem(.flexible(minimum:80,maximum:120)) // 单元格只在80或120这两个尺寸之间调整。

3、自适应的单元格，会自动根据屏幕的可用空间调整列或行的数量。

.adaptive(minimum:maximum:)

它会根据屏幕大小自适应生成尽可能多的单元格，每个单元格的大小也在一定范围内调整。

GridItem(.adaptive(minimum:80, maximum:120))    // 单元格会在80点到120点之间变化

GridItem示例

let columns = [
    GridItem(.fixed(80)),           // 每个单元格的宽度固定为 80 点
    GridItem(.flexible(minimum: 80, maximum: 120)), // 单元格宽度在 80 点到 120 点之间伸缩
    GridItem(.adaptive(minimum: 80)) // 自动根据屏幕宽度生成尽可能多的单元格，宽度最小为 80 点

]
var body: some View {
    ScrollView {
        LazyVGrid(columns: columns) {
            ForEach(0..<1000) { index in
                Text("Item \(index)")
            }
        }
    }
}

LazyVGrid和LazyHGrid容器

LazyVGrid是一个垂直网格（内容按列划分，垂直排列），而LazyHGridshi 一个水平网格（内容按行划分，水平排列）。

它们都支持二维布局，意味着内容可用被分配到多行或多列中，形成更复杂的布局。

LazyVGrid

let columns = [
    GridItem(.fixed(80)), 
    GridItem(.fixed(80)),
]
var body: some View {
    ScrollView {
        LazyVGrid(columns: columns) {
            ForEach(0..<1000) { index in
                Text("Item \(index)")
            }
        }
    }
}

LazyVGrid 会将内容按列排列，每列的宽度为 100 点，所有项目从上到下按网格排列。

LazyHGrid

let rows = [
    GridItem(.fixed(80)),
    GridItem(.fixed(80)),
]
var body: some View {
    ScrollView(.horizontal) {
        LazyHGrid(rows: rows) {
            ForEach(0..<1000) { index in
                Text("Item \(index)")
            }
        }
    }
}

LazyHGrid会将内容按行排列，每行的高度为100点，所有项目从左到右按网格排列。

总结

我们的LazyVGrid(columns:)和LazyHGrid(rows:)都是需要配置里面的网格布局项。

GridItem网格布局项主要使用其大小模式，.fixed为固定大小、.flexible为可伸缩单元格，但它只能在设定的mininum和maxinum这两个点之间伸缩。.adaptive则是一个自适应伸缩单元格。

最后就是在实际的应用中，我们的GridItem跟数组一样，需要使用[]来包裹。在ScrollView中滚动显示，还有一点ScrollView只支持水平滚动，所以当我们要显示LazyHGrid(row:)水平网格时，就需要配置ScrollView(.horizontal)。