在LazyVStack中使用带有AsyncImage的VStack会导致图像在滚动时重新加载

在使用 LazyVStack 和 AsyncImage 时，图像在滚动时重新加载的问题通常是由于 SwiftUI 的视图更新机制和异步图像加载的特性共同作用的结果。以下是对这个问题的详细解释以及可能的解决方案：

基础概念

LazyVStack:
- LazyVStack 是 SwiftUI 中的一个容器视图，用于垂直堆叠子视图。
- 它采用“懒加载”策略，即只在视图即将进入屏幕时才创建和布局子视图，这有助于提高性能，特别是在列表很长时。

AsyncImage:
- AsyncImage 是 SwiftUI 中用于异步加载和显示图像的视图。
- 它会根据提供的 URL 异步下载图像，并在下载完成后更新视图。

问题原因

当使用 LazyVStack 包含 AsyncImage 时，每次滚动导致视图重新进入或离开屏幕，SwiftUI 可能会重新创建这些视图实例。由于 AsyncImage 是异步加载图像的，这种频繁的视图重建会导致图像重新下载和显示，从而出现图像“闪烁”或重新加载的现象。

解决方案

方案一：使用 `Identifiable` 和唯一标识符

确保每个 AsyncImage 都有一个唯一的标识符，这样 SwiftUI 可以更有效地识别和管理这些视图实例，减少不必要的重建。

struct ContentView: View {
    let imageUrls = [
        "https://example.com/image1.jpg",
        "https://example.com/image2.jpg",
        // ... 其他图片URL
    ]

    var body: some View {
        ScrollView {
            LazyVStack {
                ForEach(imageUrls, id: \.self) { url in
                    AsyncImage(url: URL(string: url)) { phase in
                        switch phase {
                        case .empty:
                            ProgressView()
                        case .success(let image):
                            image.resizable().scaledToFit()
                        case .failure:
                            Image(systemName: "xmark.circle").foregroundColor(.red)
                        @unknown default:
                            EmptyView()
                        }
                    }
                }
            }
        }
    }
}

方案二：使用缓存机制

利用第三方库如 SDWebImageSwiftUI 或自定义缓存逻辑来管理图像的下载和缓存，减少重复加载。

import SDWebImageSwiftUI

struct ContentView: View {
    let imageUrls = [
        "https://example.com/image1.jpg",
        "https://example.com/image2.jpg",
        // ... 其他图片URL
    ]

    var body: some View {
        ScrollView {
            LazyVStack {
                ForEach(imageUrls, id: \.self) { url in
                    WebImage(url: URL(string: url))
                        .resizable()
                        .scaledToFit()
                }
            }
        }
    }
}

方案三：优化视图更新策略

通过调整视图的 id 或使用 @StateObject 来保持某些状态，减少 SwiftUI 对视图的重新创建。

struct ContentView: View {
    let imageUrls = [
        "https://example.com/image1.jpg",
        "https://example.com/image2.jpg",
        // ... 其他图片URL
    ]

    var body: some View {
        ScrollView {
            LazyVStack {
                ForEach(imageUrls.indices, id: \.self) { index in
                    AsyncImage(url: URL(string: imageUrls[index])) { phase in
                        switch phase {
                        case .empty:
                            ProgressView()
                        case .success(let image):
                            image.resizable().scaledToFit()
                        case .failure:
                            Image(systemName: "xmark.circle").foregroundColor(.red)
                        @unknown default:
                            EmptyView()
                        }
                    }
                }
            }
        }
    }
}