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.
