SwiftUI TabView iOS16对比iOS15：切换卡顿与程序化切换动画失效问题

问题复现 #

• 升级iOS16后，包含复杂嵌套视图的TabView（使用.page样式）切换相邻标签时出现卡顿
• 通过ObservableObject绑定selection程序化切换标签时，切换动画完全失效
• 上述场景在iOS15中运行正常

可能原因 #

iOS16对TabView(.page)的预加载机制和动画处理逻辑做了调整：

• 默认预加载相邻标签的复杂视图，切换时内存占用陡增引发卡顿
• 全局.animation修饰符与TabView内置动画逻辑冲突，导致程序化切换时动画失效

解决方案 #

1. 解决切换卡顿：延迟加载复杂子视图

给每个子视图添加延迟加载逻辑，避免TabView预加载未显示的复杂视图。可以通过自定义LazyView实现：

struct LazyView<Content: View>: View {
    let content: () -> Content
    @State private var isLoaded = false

    var body: some View {
        if isLoaded {
            content()
        } else {
            Color.clear.onAppear { isLoaded = true }
        }
    }
}

// 使用方式
TabView(selection: $ViewModel.tabRouter) {
    LazyView { View1() }
        .tag("first")
    LazyView { View2() }
        .tag("second")
    LazyView { View3() }
        .tag("third")
}
.tabViewStyle(.page(indexDisplayMode: .never))
.ignoresSafeArea(edges: .bottom)

2. 解决动画失效：使用withAnimation包裹切换逻辑

移除TabView上的全局.animation修饰符，在ViewModel的切换方法中用withAnimation显式触发动画：

// ViewModel代码
class VM: ObservableObject {
    @Published var tabRouter: String = "first"

    func switchToTab(_ tag: String) {
        withAnimation(.default) {
            tabRouter = tag
        }
    }
}

// TabView代码移除.animation修饰符
TabView(selection: $ViewModel.tabRouter) {
    LazyView { View1() }.tag("first")
    LazyView { View2() }.tag("second")
    LazyView { View3() }.tag("third")
}
.tabViewStyle(.page(indexDisplayMode: .never))
.ignoresSafeArea(edges: .bottom)

3. 额外优化：减少子视图不必要的重绘

检查复杂子视图中是否存在频繁重绘的逻辑，比如避免在body中执行耗时计算，用@State/@Binding控制状态更新范围，必要时给子视图添加.animation(nil)屏蔽无关动画：

View1()
    .tag("first")
    .animation(nil, value: ViewModel.someIrrelevantState)

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