Lazy Grid 允許創(chuàng)建靈活且易于調(diào)整的網(wǎng)格布局侮叮。我們可以創(chuàng)建 LazyVGrid 或 LazyHGrid胸墙，即創(chuàng)建一個垂直或水平增長的容器撩嚼。網(wǎng)格視圖只有在需要時才會渲染項目祖驱，因此有了“ Lazy”這個關(guān)鍵詞握恳。
適應(yīng)性 LazyVGrid
設(shè)置網(wǎng)格布局的最靈活方式是使用自適應(yīng) GridItem。我們可以設(shè)置一個最小尺寸捺僻，并讓元素自己設(shè)置最大尺寸乡洼。Lazy Grid 將自動適應(yīng)寬度，容納盡可能多的項目：
LazyVGrid(columns: [GridItem(.adaptive(minimum: 80))]) {
ForEach(0 ..< 20) { item in
Rectangle()
.frame(height: 100)
}
}
網(wǎng)格和項目間距
網(wǎng)格和 GridItem 都可以有間距匕坯。對于 LazyVGrid束昵，網(wǎng)格間距是行之間的間隔，而 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 設(shè)置為水平锹雏，而不是垂直，以行而不是列顯示术奖。
LazyHGrid(
rows: [GridItem(.adaptive(minimum: 80), spacing: 16)],
spacing: 12) {
ForEach(0 ..< 20) { item in
Rectangle().frame(width: 100)
}
}
通過使用水平的 ScrollView 和有限的高度礁遵，便可以創(chuàng)建類似于應(yīng)用商店應(yīng)用列表的布局轻绞。
ScrollView(.horizontal) {
LazyHGrid(
rows: [GridItem(.adaptive(minimum: 80), spacing: 8)],
spacing: 12) {
ForEach(0 ..< 20) { item in
Rectangle().frame(width: 300)
}
}
.frame(height: 300)
}
固定列
如果想更精細地控制每行內(nèi)個別項的大小，可以使用 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)
}
}
重復(fù)列
還可以通過設(shè)置 Array 的 repeating 和 count 屬性來設(shè)置每行固定數(shù)量的列政勃。
Array(repeating: .init(.flexible(), spacing: 8), count: 4)
參考資料
要了解有關(guān) Lazy Grid 更多信息，請訪問 SwiftUI 中的 Stacks, Grids and Outlines in SwiftUI.
