TabView中.onAppear触发异常：滑动时同时打印多个索引的问题

原因 #

SwiftUI的PageTabViewStyle会预加载相邻页面，目的是让滑动切换更流畅。所以当你从第0页滑到第1页时，第2页已经被提前渲染，导致它的onAppear也被触发，这就出现了同时打印1和2的情况。

解决办法 #

1. 依赖绑定的pageIndex执行页面逻辑

放弃使用onAppear，转而监听pageIndex的变化，只在当前页面索引匹配时执行对应逻辑，这是最可靠的方式：

TabView(selection: $pageIndex) {
    ForEach(0..<3) { item in
        Text("Test")
    }
}
.animation(.easeInOut, value: pageIndex)
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
.indexViewStyle(.page(backgroundDisplayMode: .interactive))
.onChange(of: pageIndex) { newIndex in
    print(newIndex)
    // 这里执行对应页面的初始化逻辑
}

2. 给onAppear添加条件判断

如果一定要保留onAppear，可以结合当前页面索引和pageIndex做匹配，确保只有当前显示的页面才触发逻辑：

TabView(selection: $pageIndex) {
    ForEach(0..<3) { item in
        Text("Test")
            .onAppear {
                if item == pageIndex {
                    print(item)
                }
            }
    }
}
.animation(.easeInOut, value: pageIndex)
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
.indexViewStyle(.page(backgroundDisplayMode: .interactive))

3. 用ScrollView实现无预加载的分页（iOS 16+）

从iOS 16开始，可通过ScrollView的新API实现精准分页，避免预加载：

@State private var currentPage = 0

var body: some View {
    ScrollView(.horizontal) {
        HStack(spacing: 0) {
            ForEach(0..<3) { item in
                Text("Test")
                    .frame(width: UIScreen.main.bounds.width)
            }
        }
        .scrollTargetLayout()
    }
    .scrollPosition(id: $currentPage)
    .scrollIndicators(.hidden)
    .scrollTargetBehavior(.paging)
    .onChange(of: currentPage) { newPage in
        print(newPage)
    }
}

内容的提问来源于stack exchange，提问作者Luka Šalipur