SwiftUI：选中TabItem时修改背景色而非前景色

不需要完全自定义TabView，通过绑定选中状态+自定义tabItem背景+UITabBar外观配置就能实现需求。具体步骤如下：

1. 配置UITabBar基础样式 #

先通过UITabBar.appearance()统一全局样式，确保TabItem的前景色（图标+文字）无论选中/未选中都保持一致，同时设置TabBar的整体背景：

.onAppear {
    let tabBarAppearance = UITabBar.appearance()
    tabBarAppearance.isTranslucent = false
    tabBarAppearance.backgroundColor = UIColor.gray // TabBar整体背景色
    tabBarAppearance.tintColor = UIColor.white // 选中项前景色
    tabBarAppearance.unselectedItemTintColor = UIColor.white // 未选中项前景色
}

2. 绑定选中状态并自定义tabItem背景 #

用@State变量记录当前选中的Tab索引，在每个tabItem内部根据选中状态为Label添加差异化背景：

struct ContentView: View {
    @State private var selectedTab = 0 // 记录当前选中的Tab索引

    var body: some View {
        TabView(selection: $selectedTab) {
            FirstView()
                .tabItem {
                    customTabItem(title: "First", icon: "1.lane", isSelected: selectedTab == 0)
                }
                .tag(0) // 给每个Tab设置唯一标识，匹配选中索引

            SecondView()
                .tabItem {
                    customTabItem(title: "Second", icon: "2.lane", isSelected: selectedTab == 1)
                }
                .tag(1)

            ThirdView()
                .tabItem {
                    customTabItem(title: "Third", icon: "3.lane", isSelected: selectedTab == 2)
                }
                .tag(2)

            FourthView()
                .tabItem {
                    customTabItem(title: "Fourth", icon: "4.lane", isSelected: selectedTab == 3)
                }
                .tag(3)
        }
        .onAppear {
            let tabBarAppearance = UITabBar.appearance()
            tabBarAppearance.isTranslucent = false
            tabBarAppearance.backgroundColor = UIColor.gray
            tabBarAppearance.tintColor = UIColor.white
            tabBarAppearance.unselectedItemTintColor = UIColor.white
        }
    }

    // 封装自定义tabItem内容，复用样式逻辑
    private func customTabItem(title: String, icon: String, isSelected: Bool) -> some View {
        Label(title, systemImage: icon)
            .padding(.vertical, 8)
            .frame(maxWidth: .infinity)
            .background(isSelected ? Color.blue : Color.clear) // 选中时显示背景色，未选中透明
            .cornerRadius(8) // 可选：给背景添加圆角优化视觉
    }
}

关键说明 #

• 通过TabView(selection: $selectedTab)绑定选中状态，配合.tag()实现索引与Tab的匹配；
• 封装customTabItem函数避免重复代码，统一管理tabItem的样式；
• 使用frame(maxWidth: .infinity)让自定义背景铺满整个tabItem宽度，保证视觉一致性；
• 将系统的tintColor和unselectedItemTintColor设为相同值，彻底禁用默认的前景色切换逻辑。

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