SwiftUI TabView更新选中值后未切换对应标签页问题

在 iOS 16 环境中，使用 .page 样式的 TabView 时，会遇到绑定 selection 后标签切换不响应的问题：初始显示 Tab 1，点击切换按钮后，虽然 currentTab 的值已经更新，但 TabView 并未同步切换到对应标签，需要连续点击3次按钮才能切换到 Tab 0。

问题复现代码 #

struct Test: View {
    @State var currentTab = 1
    var body: some View {
        VStack {
            Text("Current Tab: \(currentTab)")
            TabView(selection: $currentTab) {
                Text("Tab 0")
                    .tag(0)
                Text("Tab 1")
                    .tag(1)
            }
            .tabViewStyle(.page(indexDisplayMode: .never))
            Button {
                withAnimation(Animation.easeIn(duration: 0.2)) {
                    currentTab = currentTab == 0 ? 1 : 0
                }
            } label: {
                Text("Toggle Tab")
            }
        }
    }
}

问题演示 #

解决方法 #

这是 iOS 16 系统中 PageTabView 动画与 selection 绑定同步的已知 bug，有两种可行的解决方式：

• 方式一：移除动画包裹
  直接修改 currentTab 值，不使用 withAnimation 包裹操作，TabView 就能正常响应切换：

  Button {
      currentTab = currentTab == 0 ? 1 : 0
  } label: {
      Text("Toggle Tab")
  }
  

• 方式二：给 TabView 添加强制刷新标识
  如果需要保留动画效果，可以给 TabView 绑定一个基于 currentTab 的 id，强制视图在索引变化时刷新：

  TabView(selection: $currentTab) {
      Text("Tab 0")
          .tag(0)
      Text("Tab 1")
          .tag(1)
  }
  .tabViewStyle(.page(indexDisplayMode: .never))
  .id(currentTab)
  

原因说明 #

iOS 16 中，PageTabView 的动画更新逻辑与 selection 绑定的状态更新存在延迟冲突，要么避开动画触发，要么通过 id 强制视图重建，就能绕过这个系统层面的问题。

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