SwiftUI中如何为每个Tab Item单独设置文本与图标的不同颜色？

确实，SwiftUI原生的TabView在单个Tab Item颜色定制这块做得有点死板——accentColor一设全统一，foregroundColor、tint这些属性套在TabItem上根本没效果，我之前也踩过这个坑！下面给你两种实用的解决方案，看你需求选：

方案一：利用UIKit的UIAppearance（适合简单场景） #

如果只是需要给不同Tab设置不同的选中颜色，不想搞太复杂，可以借助UIKit的外观代理来实现。核心思路是遍历TabBar的所有Item，根据索引（或你给Tab设置的tag）分别指定颜色。

在你的主视图的onAppear回调里加这段代码就行：

.onAppear {
    // 遍历所有TabBarItem
    UITabBar.appearance().items?.enumerated().forEach { index, item in
        // 根据index匹配对应的Tab，设置选中状态的文本和图标颜色
        switch index {
        case 0:
            item.setTitleTextAttributes([.foregroundColor: UIColor.red], for: .selected)
            item.image = item.image?.withTintColor(.red, renderingMode: .alwaysOriginal)
        case 1:
            item.setTitleTextAttributes([.foregroundColor: UIColor.blue], for: .selected)
            item.image = item.image?.withTintColor(.blue, renderingMode: .alwaysOriginal)
        case 2:
            item.setTitleTextAttributes([.foregroundColor: UIColor.green], for: .selected)
            item.image = item.image?.withTintColor(.green, renderingMode: .alwaysOriginal)
        default:
            break
        }
    }
    // 可选：统一设置未选中状态的颜色
    UITabBar.appearance().unselectedItemTintColor = .gray
}

⚠️ 注意：这个方法依赖Tab的顺序，要是后续调整了Tab的数量或排列，记得同步修改这里的switch逻辑哦。

方案二：完全自定义TabBar（灵活度拉满） #

如果你的需求更复杂——比如要加动画、自定义背景、badge标记，或者对未选中状态的颜色也要单独定制，那直接自己写个TabBar是最靠谱的，完全掌控所有样式。

给你一个极简的实现框架，你可以按需扩展：

// 自定义TabView容器
struct CustomTabView<Content: View>: View {
    @Binding var selectedTab: Int
    let content: () -> Content
    // 存储每个Tab的配置：标题、图标名、选中/未选中颜色
    let tabConfigs: [(title: String, icon: String, selectedColor: Color, unselectedColor: Color)]
    
    var body: some View {
        ZStack(alignment: .bottom) {
            // 主内容区：用TabView承载各个页面
            content()
                .padding(.bottom, 50) // 给自定义TabBar留空间
            
            // 自定义TabBar
            HStack(spacing: 0) {
                ForEach(tabConfigs.indices, id: \.self) { index in
                    Button(action: {
                        selectedTab = index
                    }) {
                        VStack(spacing: 4) {
                            Image(systemName: tabConfigs[index].icon)
                                .foregroundColor(selectedTab == index ? tabConfigs[index].selectedColor : tabConfigs[index].unselectedColor)
                            Text(tabConfigs[index].title)
                                .font(.caption)
                                .foregroundColor(selectedTab == index ? tabConfigs[index].selectedColor : tabConfigs[index].unselectedColor)
                        }
                    }
                    .frame(maxWidth: .infinity)
                }
            }
            .padding(.vertical, 8)
            .background(Color.white)
            .shadow(color: .gray.opacity(0.2), radius: 4, x: 0, y: -2)
        }
        .ignoresSafeArea(.all, edges: .bottom)
    }
}

// 使用示例
struct ContentView: View {
    @State private var selectedTab = 0
    
    // 配置每个Tab的信息
    let tabConfigs = [
        (title: "首页", icon: "house", selectedColor: .red, unselectedColor: .gray),
        (title: "发现", icon: "magnifyingglass", selectedColor: .blue, unselectedColor: .gray),
        (title: "我的", icon: "person", selectedColor: .green, unselectedColor: .gray)
    ]
    
    var body: some View {
        CustomTabView(selectedTab: $selectedTab, tabConfigs: tabConfigs) {
            TabView(selection: $selectedTab) {
                Text("首页内容")
                    .tag(0)
                Text("发现内容")
                    .tag(1)
                Text("我的内容")
                    .tag(2)
            }
            .tabViewStyle(.page(indexDisplayMode: .never)) // 隐藏原生分页指示器
        }
    }
}

这个方案的好处是想怎么改就怎么改，比如给选中的Tab加个缩放动画，或者给某个Tab加个小红点，都能轻松实现。

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