Lazy Grid Layout

Lazy Grid 允许创建灵活且易于调整的网格布局。我们可以创建 LazyVGrid 或 LazyHGrid，即创建一个垂直或水平增长的容器。网格视图只有在需要时才会渲染项目，因此有了“ Lazy”这个关键词。

适应性 LazyVGrid

设置网格布局的最灵活方式是使用自适应 GridItem。我们可以设置一个最小尺寸，并让元素自己设置最大尺寸。Lazy Grid 将自动适应宽度，容纳尽可能多的项目：

LazyVGrid(columns: [GridItem(.adaptive(minimum: 80))]) {
    ForEach(0 ..< 20) { item in
        Rectangle()
            .frame(height: 100)
    }
}

网格和项目间距

网格和 GridItem 都可以有间距。对于 LazyVGrid，网格间距是行之间的间隔，而 GridItem 间距是项目之间的间隔。

LazyVGrid(
    columns: [GridItem(.adaptive(minimum: 80), spacing: 16)],
    spacing: 16) {

    ForEach(0 ..< 12) { item in
        RoundedRectangle(cornerRadius: 10)
            .fill(Color.blue)
            .frame(height: 100)
    }
}
.padding()
LazyHGrid

我们还可以将 Lazy Grid 设置为水平，而不是垂直，以行而不是列显示。

LazyHGrid(
    rows: [GridItem(.adaptive(minimum: 80), spacing: 16)],
    spacing: 12) {

    ForEach(0 ..< 20) { item in
        Rectangle().frame(width: 100)
    }
}

通过使用水平的 ScrollView 和有限的高度，便可以创建类似于应用商店应用列表的布局。

ScrollView(.horizontal) {
    LazyHGrid(
        rows: [GridItem(.adaptive(minimum: 80), spacing: 8)],
        spacing: 12) {

        ForEach(0 ..< 20) { item in
            Rectangle().frame(width: 300)
        }
    }
    .frame(height: 300)
}

固定列

如果想更精细地控制每行内个别项的大小，可以使用 GridItem 的固定尺寸。

LazyVGrid(
    columns: [
        GridItem(.fixed(100), spacing: 8),
        GridItem(.fixed(160), spacing: 8),
        GridItem(.fixed(80), spacing: 8)
    ], spacing: 12) {

    ForEach(0 ..< 20) { item in
        Rectangle()
            .frame(height: 80)
    }
}

重复列

还可以通过设置 Array 的 repeating 和 count 属性来设置每行固定数量的列。

Array(repeating: .init(.flexible(), spacing: 8), count: 4)

参考资料

要了解有关 Lazy Grid 更多信息，请访问 SwiftUI 中的 Stacks, Grids and Outlines in SwiftUI.