SwiftUI TabView显示异常：未选中标签图标不显示/颜色异常

原代码 #

struct ContentView: View {
    var body: some View {
        TabView{
            Mapview()
                .tabItem {
                    Image(systemName: "house")
                    Text("Home")
                }
            
            AccountView()
                .tabItem {
                    Image(systemName: "person.circle.fill")
                    Text("Account")
                }
        
        }
        .accentColor(.white)
    }
}

问题描述 #

• 处于MapView页面时，TabView不显示Account图标；切换到AccountView页面时，Home图标颜色过深难以辨认。
• 当前仅选中标签的图标会变为白色，需要设置未选中状态的图标也显示为白色，确保两个页面的TabView图标都正常显示。

问题截图 #

• MapView页面TabView（无Account图标）：
  
• AccountView页面TabView（Home图标深色）：
  

解决方案 #

要解决图标显示异常和未选中颜色问题，需要修改系统TabBar的全局外观，并统一图标样式：

struct ContentView: View {
    init() {
        // 设置未选中Tab项的图标与文字颜色为白色
        UITabBar.appearance().unselectedItemTintColor = .white
        // 可选：设置TabBar背景色为深色，让白色图标更醒目（根据你的UI需求调整）
        UITabBar.appearance().backgroundColor = .black
    }
    
    var body: some View {
        TabView{
            Mapview()
                .tabItem {
                    // 将轮廓图标改为填充式，与Account图标样式统一，避免显示异常
                    Image(systemName: "house.fill")
                    Text("Home")
                }
            
            AccountView()
                .tabItem {
                    Image(systemName: "person.circle.fill")
                    Text("Account")
                }
        
        }
        .accentColor(.white)
    }
}

关键说明 #

1. UITabBar.appearance().unselectedItemTintColor = .white：直接修改系统TabBar未选中项的颜色，让未选中的图标和文字都显示白色，解决颜色过深的问题。
2. 统一图标样式：将Home的house（轮廓图标）改为house.fill（填充图标），和Account的person.circle.fill保持一致，避免轮廓图标在深色背景下显示不完整的问题。
3. 可选背景色设置：如果你的TabBar背景不是深色，设置backgroundColor可以确保白色图标清晰可见。

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