SwiftUI中如何修改TabView的tabItem选中/未选中时的图文颜色？

方案一：修正UIAppearance的使用时机 #

之前直接在View的init里设置可能因为时机不对失效，试试在App入口的init里配置，确保App启动时就完成TabBar样式设置：

@main
struct YourApp: App {
    init() {
        // 设置选中项颜色
        UITabBar.appearance().tintColor = UIColor.systemBlue
        // 设置未选中项颜色
        UITabBar.appearance().unselectedItemTintColor = UIColor.gray
        // 可选：设置TabBar背景色
        UITabBar.appearance().backgroundColor = UIColor.systemBackground
    }
    
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

如果你的TabView嵌套在NavigationView里，这个全局配置不会被局部样式覆盖，能稳定生效。

方案二：结合selection绑定实现个性化颜色控制 #

通过绑定选中状态变量，给每个tabItem单独设置选中/未选中颜色，还能给不同tab配置不同的选中色：

struct ContentView: View {
    @State private var selectedTab = 0
    
    var body: some View {
        TabView(selection: $selectedTab) {
            NavigationView {
                Text("首页")
            }
            .tabItem {
                Image(systemName: "house")
                Text("首页")
            }
            .foregroundColor(selectedTab == 0 ? .blue : .gray)
            .tag(0)
            
            NavigationView {
                Text("我的")
            }
            .tabItem {
                Image(systemName: "person")
                Text("我的")
            }
            .foregroundColor(selectedTab == 1 ? .green : .gray)
            .tag(1)
        }
        // 清空全局accentColor避免冲突
        .accentColor(.clear)
    }
}

方案三：完全自定义TabBar组件 #

如果系统TabBar的限制太多，直接自己实现底部导航栏，样式完全由你掌控：

struct CustomTabBar: View {
    @Binding var selectedTab: Int
    
    var body: some View {
        HStack {
            TabBarItem(icon: "house", title: "首页", isSelected: selectedTab == 0)
                .onTapGesture { selectedTab = 0 }
            
            Spacer()
            
            TabBarItem(icon: "person", title: "我的", isSelected: selectedTab == 1)
                .onTapGesture { selectedTab = 1 }
        }
        .padding(.horizontal, 20)
        .padding(.vertical, 8)
        .background(Color.systemBackground)
        .shadow(color: .black.opacity(0.1), radius: 5, x: 0, y: -2)
    }
}

struct TabBarItem: View {
    let icon: String
    let title: String
    let isSelected: Bool
    
    var body: some View {
        VStack(spacing: 4) {
            Image(systemName: icon)
                .font(.title2)
                .foregroundColor(isSelected ? .blue : .gray)
            
            Text(title)
                .font(.caption)
                .foregroundColor(isSelected ? .blue : .gray)
        }
    }
}

// 使用示例
struct ContentView: View {
    @State private var selectedTab = 0
    
    var body: some View {
        ZStack(alignment: .bottom) {
            TabView(selection: $selectedTab) {
                NavigationView {
                    Text("首页")
                }
                .tag(0)
                
                NavigationView {
                    Text("我的")
                }
                .tag(1)
            }
            // 隐藏系统TabBar
            .tabViewStyle(.page(indexDisplayMode: .never))
            
            CustomTabBar(selectedTab: $selectedTab)
        }
    }
}

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