SwiftUI LazyHGrid

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

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

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

struct HorizontalSmileys: View {
    let rows = [GridItem(.fixed(30)), GridItem(.fixed(30))]

    var body: some View {
        ScrollView(.horizontal) {
            LazyHGrid(rows: rows) {
                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 代码,底部显示其对应的表情符号:

一排表情符号,上方一排十六进制数字的截图

您可以使用 Grid 容器实现类似的布局。 与仅在 SwiftUI 需要显示子视图时创建子视图的惰性网格不同,常规网格会立即创建其所有子视图。 这使网格能够为单元格间距和对齐提供更好的支持。 只有当使用 GridLayout 性能不佳时才适合使用 LazyGrid,因为它试图一次加载太多视图。