SwiftUI LazyVGrid

LazyVGrid 是 SwiftUI 中按需加载的垂直网格容器视图
iOS 14.0+iPadOS 14.0+macOS 11.0+Mac Catalyst 14.0+tvOS 14.0+watchOS 7.0+

当您想要显示以二维布局排列的大型、可垂直滚动的视图集合时，请使用 LazyVGrid。您提供给网格内容闭包的第一个视图出现在位于网格前沿的列的顶行中。其他视图占据网格中的连续单元格，从前缘到后缘填充第一行，然后是第二行，依此类推。 行数可以无限增长，但您可以通过向网格的初始化程序提供相应数量的 GridItem 实例来指定列数。

以下示例中的网格定义了两列，并使用 ForEach 结构为每行中的列重复生成一对 Text 视图：

struct VerticalSmileys: View {
    let columns = [GridItem(.flexible()), GridItem(.flexible())]

    var body: some View {
         ScrollView {
             LazyVGrid(columns: columns) {
                 ForEach(0x1f600...0x1f679, id: \.self) { value in
                     Text(String(format: "%x", value))
                     Text(emoji(value))
                         .font(.largeTitle)
                 }
             }
         }
    }

    private func emoji(_ value: Int) -> String {
        guard let scalar = UnicodeScalar(value) else { return "?" }
        return String(Character(scalar))
    }
}

对于网格中的每一行，第一列显示来自 “笑脸” 组的 Unicode 代码，第二列显示其对应的表情符号：

SwiftUI LazyVGrid sample screenshot

您可以使用 Grid 容器实现类似的布局。 与仅在 SwiftUI 需要显示子视图时创建子视图的 Lazy Grid 不同，普通 Grid 会立即创建其所有子视图。 这使单元格间距和对齐提供更好的支持。 仅当在分析你的 App 显示网格视图性能不足时才使用 Lazy Grid，因为它试图一次加载太多视图。