SwiftUI 学习 (3) - 布局管理（下）LazyVGrid 和 LazyHGrid 基础

2023-11-26 08:47:52

在 SwiftUI 中，Grid 布局是一种强大的工具，它允许您创建灵活且可定制的网格状界面。在上一篇博文中，我们探讨了 LazyVStack 和 LazyHStack，它们提供了垂直和水平的线性布局。在本篇博文中，我们将深入研究 LazyVGrid 和 LazyHGrid，这是 iOS 14 中引入的用于创建网格状布局的新布局管理器。

LazyVGrid 和 LazyHGrid

LazyVGrid 和 LazyHGrid 分别是垂直和水平的 Grid 布局管理器。它们使用与 LazyVStack 和 LazyHStack 相同的延迟加载机制，这意味着它们仅在需要时才创建视图，从而提高了大型数据集的性能。

要使用 LazyVGrid，请使用 LazyVGrid(columns: Int, alignment: HorizontalAlignment, spacing: CGFloat) 初始化器，其中：

columns 指定网格中的列数。
alignment 指定网格中视图的对齐方式。
spacing 指定网格中视图之间的间距。

以下示例演示了如何使用 LazyVGrid 创建简单的垂直网格：

struct MyVGrid: View {
    var body: some View {
        LazyVGrid(columns: 3) {
            ForEach(0..<9) { item in
                Text("\(item)")
                    .frame(width: 50, height: 50)
            }
        }
    }
}

类似地，要使用 LazyHGrid，请使用 LazyHGrid(rows: Int, alignment: VerticalAlignment, spacing: CGFloat) 初始化器，其中：

rows 指定网格中的行数。
alignment 指定网格中视图的对齐方式。
spacing 指定网格中视图之间的间距。

以下示例演示了如何使用 LazyHGrid 创建简单的水平网格：

struct MyHGrid: View {
    var body: some View {
        LazyHGrid(rows: 3) {
            ForEach(0..<9) { item in
                Text("\(item)")
                    .frame(width: 50, height: 50)
            }
        }
    }
}

自定义网格布局

LazyVGrid 和 LazyHGrid 提供了广泛的自定义选项，允许您创建满足特定需求的复杂布局。您可以自定义网格的列宽和行高，指定视图的对齐方式，甚至创建嵌套的网格。

以下示例演示了如何使用 GridItem 类型创建自定义列宽的垂直网格：

struct MyVGridWithCustomColumns: View {
    var body: some View {
        LazyVGrid(columns: [
            GridItem(.flexible(minimum: 50, maximum: 100)),
            GridItem(.flexible(minimum: 50, maximum: 150)),
            GridItem(.flexible())
        ]) {
            ForEach(0..<9) { item in
                Text("\(item)")
                    .frame(height: 50)
            }
        }
    }
}