SwiftUI TabView重复生成首个标签页问题（Xcode 14.1 RC）

问题重现 #

在Xcode 14.1 RC版本开发SwiftUI应用时，TabView出现异常：首个标签页会被重复生成，第一个标签页可正常显示，但点击第二个重复的标签页时界面为空白。尝试过移除Spacer()、切换使用枚举/整数作为标签标识，两种实现的异常表现完全一致。

解决方案 #

针对Xcode 14.1 RC中TabView的这个已知bug，可尝试以下修复方式：

• 移除包裹TabView的外层VStack
  TabView本身是自适应全屏的容器组件，外层多余的VStack可能干扰其布局逻辑，触发重复标签的问题。直接将TabView作为body的根视图即可。

• 避免在View的init中全局修改UITabBar外观
  全局修改UITabBar.appearance()可能和SwiftUI的TabView内部布局逻辑冲突，建议改用SwiftUI原生的toolbar样式修饰器来设置TabBar外观。

• 统一标签标识类型
  确保选中状态变量的类型和每个标签页的.tag()类型完全匹配，避免混合使用枚举和整数，减少潜在的类型混淆问题。

修正后的代码示例 #

import SwiftUI

struct MenuView: View {
    
    private enum Tab: Hashable {
        case location
        case calculate
        case install
        case results
        case about
    }
    
    @State private var selectedTab: Tab = .location
    
    var body: some View {
        TabView(selection: $selectedTab) {
            LocationView()
                .tag(Tab.location)
                .tabItem {
                    Text("Location")
                    Image(systemName: "globe.europe.africa")
                }
            CalculateView()
                .tag(Tab.calculate)
                .tabItem {
                    Text("Calculate")
                    Image(systemName: "apps.ipad")
                }
            InstallView()
                .tag(Tab.install)
                .tabItem {
                    Text("Install")
                    Image(systemName: "window.ceiling.closed")
                }
            ResultsView()
                .tag(Tab.results)
                .tabItem {
                    Text("Results")
                    Image(systemName: "sun.max.fill")
                }
            AboutView()
                .tag(Tab.about)
                .tabItem {
                    Text("About")
                    Image(systemName: "gear")
                }
        }
        .accentColor(.yellow)
        // 用SwiftUI原生修饰器设置TabBar外观
        .toolbarBackground(.systemGray, for: .tabBar)
        .toolbarColorScheme(.dark, for: .tabBar)
        .toolbarBackground(.visible, for: .tabBar)
    }
}

struct MenuView_Previews: PreviewProvider {
    static var previews: some View {
        MenuView()
    }
}

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