在 SwiftUI 中，LazyVGrid 和 LazyHGrid 是用于创建灵活、可调整的网格布局的组件。
它们与 GridItem 配合使用，可以实现复杂且高效的网格排列。
LazyVGrid 和 LazyHGrid 分别支持垂直和水平的懒加载网格布局，允许你根据内容大小和需求动态生成网格。
LazyVGrid 和 LazyHGrid 的基本概念
- LazyVGrid：用于创建垂直滚动的网格布局，网格中的行数是动态的，由你提供的列数和内容决定。
- LazyHGrid：用于创建水平滚动的网格布局，网格中的列数是动态的，由你提供的行数和内容决定。
- GridItem：用于定义网格中的每个列或行的布局特性，如固定宽度、自动宽度或自适应宽度。
LazyVGrid 和 LazyHGrid 的基本使用
LazyVGrid 示例
import SwiftUI
struct ContentView: View {
let columns = [
GridItem(.flexible()),
GridItem(.flexible()),
GridItem(.flexible())
]
var body: some View {
ScrollView {
LazyVGrid(columns: columns, spacing: 20) {
ForEach(0..<50) { index in
Text("Item \(index)")
.frame(maxWidth: .infinity)
.padding()
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(8)
}
}
.padding()
}
}
}
在这个例子中，LazyVGrid 创建了一个垂直滚动的网格布局，每行包含三个相同宽度的列。GridItem(.flexible()) 定义了每个列的宽度可以灵活调整，以填满可用空间。
LazyHGrid 示例
import SwiftUI
struct ContentView: View {
let rows = [
GridItem(.fixed(100)),
GridItem(.fixed(100)),
GridItem(.fixed(100))
]
var body: some View {
ScrollView(.horizontal) {
LazyHGrid(rows: rows, spacing: 20) {
ForEach(0..<50) { index in
Text("Item \(index)")
.frame(width: 100, height: 100)
.background(Color.green)
.foregroundColor(.white)
.cornerRadius(8)
}
}
.padding()
}
}
}
在这个例子中，LazyHGrid 创建了一个水平滚动的网格布局，每列包含三个固定高度的行。GridItem(.fixed(100)) 定义了每个行的高度为 100 点。
GridItem 的配置选项
GridItem 是用于配置网格布局的关键，它可以定义列或行的宽度和高度。
你可以根据需要调整 GridItem 的布局特性，以实现不同的布局效果。
- GridItem(.fixed())：固定大小。每个项的宽度或高度都是固定的。
GridItem(.fixed(100))
- GridItem(.flexible())：灵活大小。项的大小可以在一个最小和最大范围内进行调整，适应可用空间。
GridItem(.flexible(minimum: 50, maximum: 150))
- GridItem(.adaptive())：自适应大小。根据可用空间动态调整项的大小和数量。
GridItem(.adaptive(minimum: 80))
-
GridItem(.fixed()) vs GridItem(.flexible()) vs GridItem(.adaptive())
- fixed: 每个网格项的尺寸是固定的，不会根据屏幕大小变化。
- flexible: 尺寸在最小和最大值之间自适应，适合不同屏幕大小。
- adaptive: 尺寸根据最小值和屏幕宽度自动调整，适合自适应布局，自动增加或减少列数。
LazyVGrid 和 LazyHGrid 的高级使用
组合不同类型的 GridItem
你可以在同一个网格布局中混合使用不同类型的 GridItem，例如一些列是固定的，而另一些是自适应的。
import SwiftUI
struct ContentView: View {
let columns = [
GridItem(.fixed(100)),
GridItem(.adaptive(minimum: 80)),
GridItem(.flexible())
]
var body: some View {
ScrollView {
LazyVGrid(columns: columns, spacing: 20) {
ForEach(0..<50) { index in
Text("Item \(index)")
.frame(height: 100)
.background(Color.purple)
.foregroundColor(.white)
.cornerRadius(8)
}
}
.padding()
}
}
}
在这个例子中，第一个列是固定宽度，第二个列是自适应宽度，第三个列是灵活宽度。
使用场景
- 图片库：使用 LazyVGrid 创建一个类似照片墙的布局，每个图片项是自适应大小的。
- 产品展示：使用 LazyHGrid 创建一个水平滚动的产品展示列表，每个产品项是固定宽度或高度的。
- 控制面板：使用 LazyVGrid 创建一个仪表盘，显示各种统计数据或控制按钮，每个项根据内容自动调整大小。
小结：
- LazyVGrid和LazyHGrid是用于创建垂直和水平滚动网格布局的SwiftUI组件。
- GridItem配置每个列或行的布局特性，如固定、灵活或自适应大小。
- 高级使用：可以混合使用不同类型的GridItem以创建复杂的网格布局，适用于各种UI设计需求。
通过使用LazyVGrid和LazyHGrid，你可以在SwiftUI中实现功能强大且高效的网格布局，满足不同类型的应用需求。
