在 SwiftUI 中，LazyVGrid 和 LazyHGrid 是用于创建垂直和水平网格布局的容器。它们的特点是“懒加载”，即只有在视图出现在屏幕上时才会被渲染，这使得它们非常适合处理大量数据的场景。
LazyVGrid #
LazyVGrid 用于创建垂直滚动的网格布局。你可以通过定义列的数量和大小来控制布局。
基本用法 #
- 定义列：使用
GridItem来定义每一列的宽度和间距。 - 创建 LazyVGrid：使用
LazyVGrid容器包裹你的内容。 - 添加视图：在
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..<20) { index in
Text("Item \(index)")
.frame(height: 100)
.background(Color.blue)
.cornerRadius(10)
.foregroundColor(.white)
}
}
.padding()
}
}
}
LazyHGrid #
LazyHGrid 用于创建水平滚动的网格布局。你可以通过定义行的高度和大小来控制布局。
基本用法 #
- 定义行：使用
GridItem来定义每一行的高度和间距。 - 创建 LazyHGrid：使用
LazyHGrid容器包裹你的内容。 - 添加视图：在
LazyHGrid中添加视图，每个视图会自动占据一个单元格。
示例代码 #
import SwiftUI
struct ContentView: View {
let rows = [
GridItem(.flexible()),
GridItem(.flexible())
]
var body: some View {
ScrollView(.horizontal) {
LazyHGrid(rows: rows, spacing: 20) {
ForEach(0..<20) { index in
Text("Item \(index)")
.frame(width: 100)
.background(Color.green)
.cornerRadius(10)
.foregroundColor(.white)
}
}
.padding()
}
}
}
GridItem #
GridItem 用于定义网格的行或列的大小和间距。它有几种类型：
- .fixed(CGFloat)：固定大小。
- .flexible(minimum: CGFloat, maximum: CGFloat)：灵活大小，可以设置最小和最大值。
- .adaptive(minimum: CGFloat, maximum: CGFloat)：自适应大小，根据可用空间自动调整。
示例代码 #
import SwiftUI
struct ContentView: View {
let columns = [
GridItem(.fixed(100)),
GridItem(.flexible(minimum: 50, maximum: 200)),
GridItem(.adaptive(minimum: 50, maximum: 100))
]
var body: some View {
ScrollView {
LazyVGrid(columns: columns, spacing: 20) {
ForEach(0..<20) { index in
Text("Item \(index)")
.frame(height: 100)
.background(Color.orange)
.cornerRadius(10)
.foregroundColor(.white)
}
}
.padding()
}
}
}
总结 #
- LazyVGrid：用于创建垂直滚动的网格布局，适合处理大量数据。
- LazyHGrid：用于创建水平滚动的网格布局，适合处理大量数据。
- GridItem：用于定义网格的行或列的大小和间距，支持固定、灵活和自适应大小。
通过 LazyVGrid 和 LazyHGrid，你可以轻松创建复杂的网格布局，并且由于它们的懒加载特性，能够高效地处理大量数据。