SwiftUI视图懒加载LazyVStack和LazyHStack

在 SwiftUI 中，LazyVStack 和 LazyHStack 是用于垂直或水平排列子视图的懒加载版本。与普通的 VStack 和 HStack 不同，它们只会加载屏幕中可见的子视图，从而在处理大量内容时提高性能。

基础用法

LazyVStack（垂直堆叠）

struct LazyVStackExample: View {
    var body: some View {
        ScrollView {
            LazyVStack(spacing: 20) {
                ForEach(0..<1000, id: \.self) { index in
                    Text("Item \(index)")
                        .padding()
                        .frame(maxWidth: .infinity)
                        .background(Color.blue.opacity(0.2))
                        .cornerRadius(8)
                }
            }
            .padding()
        }
    }
}

功能：以垂直方向排列子视图，仅渲染当前屏幕可见范围内的视图。

特点：

适用于需要垂直滚动大量数据的场景。

避免一次性加载所有视图，节省内存。

LazyHStack（水平堆叠）

struct LazyHStackExample: View {
    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack(spacing: 20) {
                ForEach(0..<1000, id: \.self) { index in
                    Text("Item \(index)")
                        .padding()
                        .frame(width: 150, height: 150)
                        .background(Color.green.opacity(0.2))
                        .cornerRadius(8)
                }
            }
            .padding()
        }
    }
}

功能：以水平方向排列子视图，仅渲染屏幕可见范围内的视图。

特点：

适用于需要水平滚动的大量内容。

性能优于普通的 HStack，尤其是在视图数量较多时。

与普通 VStack 和 HStack 的对比

VStack和HStack：一次性加载所有子视图，数据量大时性能较差，适合小规模视图。

LazyVStack和LazyHStack：按需加载，只加载可见范围的子视图，数据量大时性能优越，适合大量动态数据。

常见用途和场景

1、数据列表

大量数据时，使用 LazyVStack 是最佳选择。

struct DataListExample: View {
    var body: some View {
        ScrollView {
            LazyVStack(spacing: 10) {
                ForEach(0..<5000, id: \.self) { index in
                    HStack {
                        Text("Row \(index)")
                            .padding()
                            .frame(maxWidth: .infinity, alignment: .leading)
                            .background(Color.gray.opacity(0.2))
                            .cornerRadius(8)
                    }
                }
            }
            .padding()
        }
    }
}

5000行Text的数据列表，适合使用LazyVStack。

2、图片列表

图片浏览器可以利用 LazyHStack 实现水平滚动。

struct ImageGalleryExample: View {
    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack(spacing: 15) {
                ForEach(0..<50, id: \.self) { index in
                    Image(systemName: "photo")
                        .resizable()
                        .scaledToFit()
                        .frame(width: 100, height: 100)
                        .background(Color.orange.opacity(0.3))
                        .cornerRadius(10)
                }
            }
            .padding()
        }
    }
}

图片列表比较多时，不适合一次性全部加载，可是用LazyHStack展示。

3、瀑布流效果（嵌套使用）

可以将 LazyVStack 和 LazyHStack 嵌套使用，创建复杂布局，例如网格或瀑布流。

struct LazyGridExample: View {
    var body: some View {
        ScrollView {
            LazyVStack {
                ForEach(0..<10, id: \.self) { row in
                    LazyHStack {
                        ForEach(0..<5, id: \.self) { column in
                            Text("\(row), \(column)")
                                .padding()
                                .frame(width: 80, height: 80)
                                .background(Color.blue.opacity(0.3))
                                .cornerRadius(10)
                        }
                    }
                }
            }
        }
    }
}

多层嵌套的情况下，也可以使用LazyVStack和LazyHStack加载内容。

注意事项

1、ScrollView 的必要性：

LazyVStack 和 LazyHStack 通常需要嵌套在 ScrollView 中，因为它们本身不会自动提供滚动功能。

2、懒加载特性：

虽然懒加载会延迟视图加载，但如果视图非常复杂，仍需注意子视图的渲染性能。

3、数据绑定：

在大量动态数据的情况下，结合 ForEach 使用，并确保每个视图具有唯一标识符（通过 id 提供）。

4、嵌套性能：

嵌套使用多个 LazyVStack 和 LazyHStack 时，虽然性能优于普通 VStack 和 HStack，但仍需避免过深的嵌套。

总结

LazyVStack 和 LazyHStack 是 SwiftUI 提供的高效堆叠容器，适用于动态内容和大数据量的场景。

它们与 ScrollView 搭配使用，可以显著提升性能，尤其是在需要滚动大量数据时。

在开发中，选择使用 Lazy 系列堆叠视图，可以更好地管理内存和渲染效率，同时保持界面响应流畅。