网格布局
在 SwiftUI 中,LazyVGrid
和 LazyHGrid
用于实现网格布局。与 VStack
和 HStack
不同,LazyVGrid
和 LazyHGrid
会按需懒加载内容,仅渲染当前可见区域内的项目,从而优化性能,特别是在显示大量项目时。
1. 使用 LazyVGrid
实现垂直网格
LazyVGrid
实现垂直网格LazyVGrid
适用于在垂直方向排列网格项目,并且允许你定义列的布局规则。
基本示例
struct GridExample: View {
let columns = [
GridItem(.fixed(100)), // 固定列宽
GridItem(.flexible()), // 灵活列宽
GridItem(.adaptive(minimum: 50)) // 自适应列宽
]
var body: some View {
ScrollView {
LazyVGrid(columns: columns, spacing: 20) {
ForEach(0..<50) { index in
Text("Item \(index)")
.frame(height: 100)
.background(Color.blue)
.cornerRadius(8)
}
}
.padding()
}
}
}
在这个示例中,我们使用了 LazyVGrid
,并通过 columns
参数定义了列的布局:
第一列的宽度是固定的,100 点。
第二列的宽度是灵活的,会根据屏幕大小自适应调整。
第三列是自适应的,最小宽度为 50 点,尽量多放列。
LazyVGrid
会在垂直方向生成网格,并将列布局应用到每一行。
2. 使用 LazyHGrid
实现水平网格
LazyHGrid
实现水平网格LazyHGrid
适用于在水平方向排列网格项目,类似 LazyVGrid
,但网格会按行排列。
基本示例
struct HorizontalGridExample: View {
let rows = [
GridItem(.fixed(100)), // 固定行高
GridItem(.flexible()), // 灵活行高
GridItem(.adaptive(minimum: 50)) // 自适应行高
]
var body: some View {
ScrollView(.horizontal) {
LazyHGrid(rows: rows, spacing: 20) {
ForEach(0..<50) { index in
Text("Item \(index)")
.frame(width: 100)
.background(Color.green)
.cornerRadius(8)
}
}
.padding()
}
}
}
这里,我们定义了行的布局规则:
第一行的高度是固定的 100 点。
第二行的高度是灵活的,会根据可用空间自适应。
第三行是自适应的,最小高度为 50 点。
LazyHGrid
将内容在水平方向滚动,并使用行布局。
3. 自适应网格 (.adaptive
)
.adaptive
).adaptive
允许你设置项目的最小宽度或高度,并根据容器的可用空间动态调整项目的数量,确保它们尽可能多地填充容器。
struct AdaptiveGridExample: View {
let columns = [
GridItem(.adaptive(minimum: 80))
]
var body: some View {
ScrollView {
LazyVGrid(columns: columns, spacing: 20) {
ForEach(0..<100) { index in
Text("Item \(index)")
.frame(width: 80, height: 80)
.background(Color.purple)
.cornerRadius(8)
}
}
.padding()
}
}
}
在这个示例中,每个网格项的最小宽度为 80 点,但当屏幕宽度足够时,更多的项目可以被放入同一行。这使得布局非常灵活,可以根据设备屏幕宽度调整列数。
4. 自定义网格项间距
你可以通过 spacing
属性来调整网格项目之间的间距:
let columns = [
GridItem(.fixed(100), spacing: 10), // 列间距为 10 点
GridItem(.flexible(), spacing: 20), // 列间距为 20 点
GridItem(.adaptive(minimum: 80), spacing: 30) // 列间距为 30 点
]
这样,你可以控制网格项目之间的距离,使布局更灵活。
总结
LazyVGrid
和LazyHGrid
适用于网格布局,分别用于垂直和水平方向。你可以使用
.fixed
、.flexible
和.adaptive
来灵活定义网格的列或行布局。它们按需渲染内容,适合处理大量项目时优化性能。
Last updated