SwiftUI中onAppear提前触发，无限滚动API分页加载失效求助

问题出在VStack会一次性渲染所有子视图，即使它们不在当前屏幕范围内，所以最后一个Text的onAppear会在页面初始化时就被触发。换成**懒加载容器LazyVStack**就能解决这个问题，它只会在视图即将进入可视区域时才初始化并触发onAppear。

修改后的代码：

struct ContentView: View {
    var body: some View {
        ScrollView {
            // 用LazyVStack替换VStack
            LazyVStack {
                ForEach(1...120, id: \.self) { index in
                    Text("Item \(index)")
                        .onAppear {
                            if index == 120 {
                                print("End reached")
                            }
                        }
                }
            }
        }
    }
}

额外优化建议 #

如果需要提前触发加载（比如滚动到倒数第2个item就开始请求下一页，避免用户等待），可以调整判断条件适配动态数据场景：

struct ContentView: View {
    // 模拟动态数据列表
    @State private var items = Array(1...20)
    
    var body: some View {
        ScrollView {
            LazyVStack {
                ForEach(items, id: \.self) { index in
                    Text("Item \(index)")
                        .onAppear {
                            // 滚动到倒数第1个item时触发加载
                            if index == items.count {
                                loadNextPage()
                            }
                        }
                }
            }
        }
    }
    
    // 模拟API请求加载下一页
    func loadNextPage() {
        let newItems = Array(items.count + 1...items.count + 20)
        items.append(contentsOf: newItems)
    }
}

原理说明 #

LazyVStack遵循SwiftUI的懒加载机制，只会创建当前可视区域及附近的视图，既提升了大列表的性能，也能保证onAppear只在视图真正要进入屏幕时触发，完美匹配无限滚动的需求。

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