SwiftUI中TabBar未选中项着色与分隔线显示冲突问题求助

当添加.toolbarBackground(.visible, for: .tabBar)后，原来通过UITabBar.appearance()设置的未选中项颜色会失效——这是因为启用该修饰符后，SwiftUI会切换到自身的Toolbar渲染系统，不再依赖UIKit的UITabBar实例，导致UIKit层面的配置被完全覆盖。

解决方案（iOS 16+ 推荐） #

直接用SwiftUI原生修饰符配置TabBar样式，无需依赖UIKit：

import SwiftUI

struct Test: View {
    var body: some View {
        TabView {
            Text("1")
                .tabItem {
                    Image(systemName: "heart.fill")
                    Text("Heart")
                }
            Text("2")
                .tabItem {
                    Image(systemName: "gearshape.fill")
                    Text("Settings")
                }
        }
        // 设置TabBar背景色并强制显示分隔线
        .toolbarBackground(Color.systemBackground, for: .tabBar)
        .toolbarBackground(.visible, for: .tabBar)
        // 设置选中项的着色颜色（可自定义）
        .tint(.blue)
        // 设置未选中项的着色颜色
        .unselectedItemTint(.red)
    }
}

#Preview {
    Test()
}

兼容iOS 15的方案 #

如果需要支持iOS 15，可通过TabView的选中状态配合自定义环境变量手动控制颜色：

import SwiftUI

struct Test: View {
    @State private var selectedTab = 0
    
    var body: some View {
        TabView(selection: $selectedTab) {
            Text("1")
                .tabItem {
                    CustomTabLabel(title: "Heart", icon: "heart.fill", tag: 0)
                }
                .tag(0)
            
            Text("2")
                .tabItem {
                    CustomTabLabel(title: "Settings", icon: "gearshape.fill", tag: 1)
                }
                .tag(1)
        }
        .toolbarBackground(Color.systemBackground, for: .tabBar)
        .toolbarBackground(.visible, for: .tabBar)
        .tint(.blue)
        .environment(\.selectedTab, selectedTab)
    }
}

// 自定义标签视图，根据选中状态切换颜色
struct CustomTabLabel: View {
    let title: String
    let icon: String
    let tag: Int
    
    @Environment(\.selectedTab) private var selectedTab
    
    var body: some View {
        Label(title, systemImage: icon)
            .foregroundColor(selectedTab == tag ? .blue : .red)
    }
}

// 自定义环境键，传递选中状态
private struct SelectedTabKey: EnvironmentKey {
    static let defaultValue = 0
}

extension EnvironmentValues {
    var selectedTab: Int {
        get { self[SelectedTabKey.self] }
        set { self[SelectedTabKey.self] = newValue }
    }
}

#Preview {
    Test()
}

关键说明 #

• .toolbarBackground(.visible, for: .tabBar)会强制SwiftUI使用原生Toolbar渲染逻辑，完全替代UIKit的UITabBar，因此旧的UIKit外观配置不再生效。
• iOS 16+提供的.unselectedItemTint是最简洁的原生解决方案，直接控制未选中项的颜色。
• 低版本兼容方案需要通过状态绑定和自定义视图，手动实现选中/未选中状态的颜色切换。

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