SwiftUI中ScrollView+LazyVStack快速滚动时分页触发异常问题

问题根源 #

1. 无效的懒加载嵌套：你的LazyVStack内部套了一层VStack，导致LazyVStack的懒加载失效（仅直接子视图会被懒加载），一次性加载所有内容，快速滚动时内容高度突变引发滚动位置异常。
2. 无限制的分页触发：缺少加载状态锁，新增内容后ScrollView自动滚动到底部，重复触发最后一个元素的onAppear，导致无限分页。
3. 滚动位置未持久化：新增内容后未手动恢复之前的滚动偏移，ScrollView自动调整位置引发连锁问题。

解决方案 #

1. 修正视图结构，恢复懒加载能力

去掉LazyVStack内部的外层VStack，让ForEach直接作为LazyVStack的子视图：

ScrollView {
    CustomHeaderView()
    LazyVStack {
        ForEach(someArray.indices, id: \.self) { index in
            VStack {
                HStack {
                    VStack {
                        someCustomView()
                    }
                }
            }
            // 仅在最后一个元素出现且未加载时触发分页
            .onAppear {
                guard index == someArray.count - 1, !isLoading else { return }
                isLoading = true
                // 执行分页请求
                fetchNextPage { newData in
                    // 保存当前滚动位置
                    let currentOffset = lastScrollPosition
                    // 追加新数据
                    someArray.append(contentsOf: newData)
                    // 恢复滚动位置
                    DispatchQueue.main.async {
                        withAnimation(.none) {
                            scrollProxy?.scrollTo(currentOffset, anchor: .top)
                        }
                        isLoading = false
                    }
                }
            }
        }
    }
}
.scrollViewReader { proxy in
    scrollProxy = proxy
}
.coordinateSpace(name: "scrollView")
.trackScrollOffset()

2. 实现滚动偏移量的记录

通过PreferenceKey实时获取ScrollView的滚动偏移：

struct ScrollOffsetPreferenceKey: PreferenceKey {
    static var defaultValue: CGPoint = .zero
    static func reduce(value: inout CGPoint, nextValue: () -> CGPoint) {}
}

extension View {
    func trackScrollOffset() -> some View {
        background(
            GeometryReader { geo in
                Color.clear
                    .preference(key: ScrollOffsetPreferenceKey.self, value: geo.frame(in: .named("scrollView")).origin)
            }
        )
    }
}

在视图中添加偏移监听：

@State private var lastScrollPosition: CGFloat = 0

// 在主视图中添加
.onPreferenceChange(ScrollOffsetPreferenceKey.self) { offset in
    lastScrollPosition = offset.y
}

3. 增加加载状态锁

定义状态变量避免重复触发分页：

@State private var isLoading = false
@State private var scrollProxy: ScrollViewProxy?

4. 禁用动画避免滚动跳动

恢复滚动位置时使用withAnimation(.none)，消除自动滚动带来的跳动感。

额外优化建议 #

• 不要用indices作为ForEach的id，尽量使用数组元素自身的唯一标识（比如模型的id属性），避免数据更新时视图错误刷新。
• 可以设置“距离底部阈值”，比如当元素距离底部还有200pt时就触发分页，提升用户体验同时减少误触发。

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