SwiftUI中通过Appearance修改未选中Tab颜色失效问题及解决方法

失效原因 #

1. 全局UITabBar.appearance()设置被覆盖：iOS 15+ 后，SwiftUI的TabView底层实现逻辑调整，全局设置的unselectedItemTintColor会被SwiftUI自身的样式系统（比如App的AccentColor、TabView的toolbar样式）覆盖，尤其是设置时机晚于TabView渲染时。
2. 直接给tabItem内的Image设置foregroundColor无效：tabItem的视图会被UITabBarItem包装，SwiftUI会忽略直接在Image上设置的颜色属性，因为UITabBarItem会自行管理选中/未选中状态的色调。

解决方法 #

方法一：在App启动时正确设置UITabBar.appearance() #

将全局设置放在App初始化的最早期，确保在TabView渲染前生效：

@main
struct YourApp: App {
    init() {
        // 设置未选中标签颜色为白色
        UITabBar.appearance().unselectedItemTintColor = .white
        // 可选：手动设置选中标签颜色（默认使用App的AccentColor）
        // UITabBar.appearance().tintColor = UIColor(named: "AccentColor")
    }
    
    var body: some Scene {
        WindowGroup {
            TabView(selection: $selectedTab) {
                SettingsView()
                    .tabItem {
                        Image("ic-settings")
                            .renderingMode(.template)
                    }
                    .tag("settings")
                
                NavigationView {
                    ChatView()
                }
                .tabItem {
                    Image("ic-chat-bubble")
                        .renderingMode(.template)
                }
                .tag("chat")
            }
        }
    }
}

如果App使用了UIApplicationDelegateAdaptor，也可以在application(_:didFinishLaunchingWithOptions:)方法中执行上述设置。

方法二：iOS 16+ 结合Toolbar样式设置 #

iOS 16及以上，SwiftUI的TabView基于Toolbar实现，可配合toolbar系列修饰器确保样式生效：

struct MainView: View {
    @State private var selectedTab = "chat"
    
    var body: some View {
        TabView(selection: $selectedTab) {
            SettingsView()
                .tabItem {
                    Image("ic-settings")
                        .renderingMode(.template)
                }
                .tag("settings")
            
            NavigationView {
                ChatView()
            }
            .tabItem {
                Image("ic-chat-bubble")
                    .renderingMode(.template)
            }
            .tag("chat")
        }
        // 设置TabBar背景色（可选，根据需求调整）
        .toolbarBackground(Color.black, for: .tabBar)
        .toolbarBackground(.visible, for: .tabBar)
        // 适配深色/浅色模式下的颜色表现
        .toolbarColorScheme(.dark, for: .tabBar)
        .onAppear {
            UITabBar.appearance().unselectedItemTintColor = .white
        }
    }
}

方法三：自定义TabBar完全控制样式 #

如果上述系统方法都无法满足需求，可自行实现底部TabBar，完全掌控选中/未选中状态的样式：

// 自定义TabBar组件
struct CustomTabBar: View {
    @Binding var selectedTab: String
    
    var body: some View {
        HStack(spacing: 0) {
            TabBarItem(
                imageName: "ic-settings",
                isSelected: selectedTab == "settings",
                action: { selectedTab = "settings" }
            )
            
            TabBarItem(
                imageName: "ic-chat-bubble",
                isSelected: selectedTab == "chat",
                action: { selectedTab = "chat" }
            )
        }
        .background(Color.black)
        .frame(height: 50)
        .padding(.bottom, safeAreaInsets.bottom)
    }
    
    // 单个Tab项组件
    private func TabBarItem(imageName: String, isSelected: Bool, action: @escaping () -> Void) -> some View {
        Button(action: action) {
            VStack(spacing: 4) {
                Image(imageName)
                    .renderingMode(.template)
                    .foregroundColor(isSelected ? Color("AccentColor") : .white)
                // 可选：添加Tab文字
                // Text(isSelected ? "设置" : "设置")
                //     .font(.caption)
                //     .foregroundColor(isSelected ? Color("AccentColor") : .white)
            }
            .frame(maxWidth: .infinity)
        }
    }
    
    // 获取安全区域底部边距
    private var safeAreaInsets: UIEdgeInsets {
        guard let window = UIApplication.shared.connectedScenes.first as? UIWindowScene else { return .zero }
        return window.windows.first?.safeAreaInsets ?? .zero
    }
}

// 主视图使用自定义TabBar
struct MainView: View {
    @State private var selectedTab = "chat"
    
    var body: some View {
        ZStack {
            // 根据选中Tab切换内容
            switch selectedTab {
            case "settings":
                SettingsView()
            case "chat":
                NavigationView {
                    ChatView()
                }
            default:
                EmptyView()
            }
            
            // 底部自定义TabBar
            VStack {
                Spacer()
                CustomTabBar(selectedTab: $selectedTab)
            }
        }
    }
}

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