SwiftUI LazyVGrid追加新项时避免ScrollView视图刷新问题

核心问题分析 #

你遇到的滚动位置重置、视图全量刷新，大概率是以下几个原因导致：

• imageList.images 每次更新时是重新创建数组而非原地追加，导致ForEach识别为整个数据源替换，触发全量视图重建
• gridItemLayout 定义在body内部，每次视图刷新都会重新生成，额外触发不必要的重绘
• 加载更多的触发逻辑没有防重复，可能导致多次调用API，加剧视图波动
• 错误的scrollTo调用反而干扰了ScrollView的自然滚动行为

针对性解决方案 #

1. 确保数据源原地追加，而非替换数组 #

你的ImageList类中，更新图片列表时必须直接在原有数组上追加元素，而不是重新赋值新数组。比如：

// 正确的方式（原地追加）
func loadMoreImages(newImages: [ImageItem]) {
    self.images.append(contentsOf: newImages)
}

// 错误的方式（会触发全量刷新）
func loadMoreImages(newImages: [ImageItem]) {
    self.images = self.images + newImages
}

同时确保ImageItem严格遵循Identifiable，且id是唯一且不变的（比如用服务器返回的唯一ID，不要用索引）。

2. 提取gridItemLayout为静态常量 #

把网格布局定义移到结构体外部，避免每次body计算都重新创建：

struct FilesGridView: View {
    static let gridSpacing: CGFloat = 10
    // 改为静态常量
    static let gridItemLayout = [
        GridItem(.flexible(minimum: 40), spacing: gridSpacing),
        GridItem(.flexible(minimum: 40), spacing: gridSpacing),
        GridItem(.flexible(minimum: 40), spacing: gridSpacing),
        GridItem(.flexible(minimum: 40), spacing: gridSpacing)
    ]
    
    @ObservedObject var imageList: ImageList
    @State private var isLoading = false // 新增防重复加载状态
    // 移除原来的gridItemLayout定义
    
    var loadMore: (() -> Void)?
    
    var body: some View {
        // ... 后续代码
    }
}

3. 优化加载更多的触发逻辑 #

添加isLoading状态防止重复调用，同时调整触发时机，确保只有滚动到最后一个元素时才触发：

// 替换原来的task逻辑
.task {
    guard !isLoading, let lastItem = imageList.images.last, item.id == lastItem.id else { return }
    isLoading = true
    loadMore?()
}

在数据更新完成后重置加载状态：

.onChange(of: imageList.images.count) { _ in
    isLoading = false // 数据加载完成后允许再次触发
}

4. 移除不必要的scrollTo调用 #

默认情况下，原地追加数组元素时，ScrollView会保持当前滚动位置，不需要手动调用scrollTo。原代码中强制滚动到底部的逻辑会干扰自然滚动行为，直接移除即可。

修改后的完整代码示例 #

struct FilesGridView: View {
    static let gridSpacing: CGFloat = 10
    static let gridItemLayout = [
        GridItem(.flexible(minimum: 40), spacing: gridSpacing),
        GridItem(.flexible(minimum: 40), spacing: gridSpacing),
        GridItem(.flexible(minimum: 40), spacing: gridSpacing),
        GridItem(.flexible(minimum: 40), spacing: gridSpacing)
    ]
    
    @ObservedObject var imageList: ImageList
    @State private var isLoading = false
    
    var loadMore: (() -> Void)?
    
    var body: some View {
        ScrollView(.vertical) {
            LazyVGrid(columns: Self.gridItemLayout, spacing: 10) {
                ForEach(imageList.images) { item in
                    ImageView(url: item.thumbnail, size: CGSize(width: 80, height: 80))
                        .id(item.id)
                        .cornerRadius(5)
                        .task {
                            guard !isLoading, let lastItem = imageList.images.last, item.id == lastItem.id else { return }
                            isLoading = true
                            loadMore?()
                        }
                }
            }
            .onChange(of: imageList.images.count) { _ in
                isLoading = false
            }
        }
        .padding(.horizontal)
    }
}

// 示例数据模型（需确保遵循Identifiable）
struct ImageItem: Identifiable {
    let id: String // 用服务器返回的唯一ID
    let thumbnail: URL
}

class ImageList: ObservableObject {
    @Published var images: [ImageItem] = []
    
    func appendNewImages(newImages: [ImageItem]) {
        // 原地追加，避免替换数组
        images.append(contentsOf: newImages)
    }
}

额外注意事项 #

• 检查ImageView是否有不必要的重绘逻辑，比如内部使用了不稳定的@State变量，或未正确处理图片缓存，可能导致单个Item刷新影响整体
• 远程图片加载建议使用AsyncImage或自定义带缓存的组件，避免重复请求图片

内容的提问来源于stack exchange，提问作者Natto