SwiftUI中如何修改选中TabBar项图标颜色且不使.tint作用于所有子视图

.accentColor即将被弃用，官方推荐用.tint替代，但用上之后发现TabBar里的所有Toggle控件都被染上了这个颜色。现在需要实现只修改选中TabBar项的图标/文字颜色，同时不让.tint影响到TabView里的子视图。

原代码示例：

@State private var selectedTab = "One"
@State private var isOn = true

var body: some View {
    TabView(selection: $selectedTab) {
        VStack{
            Text("Tab 1")
            Toggle(isOn: $isOn){
                Text("Whatever?")
            }
        }
        .padding()
        .tabItem {
            Label("One", systemImage: "star")
        }
        .tag("One")

        Text("Tab 2")
            .tabItem {
                Label("Two", systemImage: "square")
            }
            .tag("Two")
    }
    .tint(.teal)
}

效果截图：

问题出在TabView.tint会把颜色传递给所有子视图，包括里面的Toggle。要解决这个问题，就得把颜色的作用范围限制在TabBar本身，下面给两种可行的方法：

方法一：用UITabBarAppearance定制TabBar样式（UIKit适配） #

这种方式能精准控制TabBar的选中/未选中状态，完全不会影响子视图的样式，而且和系统原生的TabBar行为一致：

import SwiftUI

struct ContentView: View {
    @State private var selectedTab = "One"
    @State private var isOn = true
    
    init() {
        let tabBarAppearance = UITabBarAppearance()
        // 设置选中项的图标和文字颜色
        tabBarAppearance.stackedLayoutAppearance.selected.iconColor = .teal
        tabBarAppearance.stackedLayoutAppearance.selected.titleTextAttributes = [.foregroundColor: UIColor.teal]
        // 可选：设置未选中项的颜色（用系统默认的secondaryLabel也可以）
        tabBarAppearance.stackedLayoutAppearance.normal.iconColor = .secondaryLabel
        tabBarAppearance.stackedLayoutAppearance.normal.titleTextAttributes = [.foregroundColor: UIColor.secondaryLabel]
        
        // 应用样式到全局TabBar
        UITabBar.appearance().standardAppearance = tabBarAppearance
        // 适配页面滚动到顶部时的TabBar样式
        UITabBar.appearance().scrollEdgeAppearance = tabBarAppearance
    }
    
    var body: some View {
        TabView(selection: $selectedTab) {
            VStack{
                Text("Tab 1")
                Toggle(isOn: $isOn){
                    Text("Whatever?")
                }
            }
            .padding()
            .tabItem {
                Label("One", systemImage: "star")
            }
            .tag("One")

            Text("Tab 2")
                .tabItem {
                    Label("Two", systemImage: "square")
                }
                .tag("Two")
        }
    }
}

方法二：纯SwiftUI动态设置tabItem颜色 #

通过监听选中Tab的状态，给每个tabItem的Label单独设置颜色，完全不需要用全局的.tint：

struct ContentView: View {
    @State private var selectedTab = "One"
    @State private var isOn = true
    
    var body: some View {
        TabView(selection: $selectedTab) {
            VStack{
                Text("Tab 1")
                Toggle(isOn: $isOn){
                    Text("Whatever?")
                }
            }
            .padding()
            .tabItem {
                Label("One", systemImage: "star")
                    .foregroundColor(selectedTab == "One" ? .teal : .secondaryLabel)
            }
            .tag("One")

            Text("Tab 2")
                .tabItem {
                    Label("Two", systemImage: "square")
                        .foregroundColor(selectedTab == "Two" ? .teal : .secondaryLabel)
                }
                .tag("Two")
        }
    }
}

两种方法怎么选 #

• 方法一：适合需要统一管理所有TabBar样式的场景，比如多个页面的TabBar要保持一致，样式更贴近系统原生，而且不会干扰任何子视图。
• 方法二：纯SwiftUI写法，代码更简洁，适合简单的颜色切换需求，不用碰UIKit的代码。

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