SwiftUI中preferredColorScheme对TabView的Tab Bar不生效问题

问题描述 #

我想在SwiftUI应用中添加外观选择器，支持三种模式：

• 深色外观（Dark appearance）
• 浅色外观（Light appearance）
• 跟随系统设置（Respect System setting）

使用preferredColorScheme修饰符实现后，应用内大部分视图都能正常响应外观切换，但TabView底部的Tab Bar始终不遵循自定义的外观设置，如何修复这个问题？

原实现代码 #

import SwiftUI

struct ContentView: View {
    
    @State var selectedTab: Int
    @AppStorage("selectedAppAppearance") var selectedAppAppearance: String = "system"

    
    var body: some View {
        TabView(selection: $selectedTab) {
            Form {
                Section(header: Text("Section 1")) {
                    Picker("Appearance", selection: $selectedAppAppearance) {
                        Text("Light")
                            .tag("light")
                        Text("Dark")
                            .tag("dark")
                        Text("System")
                            .tag("system")
                    }
                }
                Section(header: Text("Section 2")) {
                    ForEach(1..<20) { index in
                        Text("Row \(index)")
                    }
                }
            }
            .tabItem {
                VStack {
                    Image(systemName: "1.circle")
                    Text("First")
                }
            }
            .tag(1)
            ScrollView {
                
            }
            .tabItem {
                    VStack {
                        Image(systemName: "2.circle")
                        Text("Second")
                    }
                }
        }
        .preferredColorScheme(getColorScheme(input: selectedAppAppearance))
    }
    
    private func getColorScheme(input: String) -> ColorScheme? {
        switch input {
        case "light":
            return .light
        case "dark":
            return .dark
        default:
            return nil
        }
    }
    
}

#Preview {
    ContentView(selectedTab: 1)
}

问题表现 #

修复方案 #

问题原因 #

preferredColorScheme是SwiftUI层级的修饰符，而TabBar属于UIKit原生组件，不会自动同步SwiftUI的颜色Scheme设置，需要手动通过UIKit的API来适配外观变化。

具体实现 #

通过监听外观选择的变化，使用UITabBarAppearance自定义TabBar的外观，让它和SwiftUI的颜色Scheme保持一致。修改后的完整代码如下：

import SwiftUI

struct ContentView: View {
    
    @State var selectedTab: Int
    @AppStorage("selectedAppAppearance") var selectedAppAppearance: String = "system"

    var body: some View {
        TabView(selection: $selectedTab) {
            // 第一个Tab页面
            Form {
                Section(header: Text("Section 1")) {
                    Picker("Appearance", selection: $selectedAppAppearance) {
                        Text("Light")
                            .tag("light")
                        Text("Dark")
                            .tag("dark")
                        Text("System")
                            .tag("system")
                    }
                }
                Section(header: Text("Section 2")) {
                    ForEach(1..<20) { index in
                        Text("Row \(index)")
                    }
                }
            }
            .tabItem {
                VStack {
                    Image(systemName: "1.circle")
                    Text("First")
                }
            }
            .tag(1)
            
            // 第二个Tab页面
            ScrollView {
                
            }
            .tabItem {
                VStack {
                    Image(systemName: "2.circle")
                    Text("Second")
                }
            }
            .tag(2)
        }
        .preferredColorScheme(getColorScheme(input: selectedAppAppearance))
        // 监听外观变化并更新TabBar
        .onChange(of: selectedAppAppearance) { _ in
            updateTabBarAppearance()
        }
        // 页面加载时初始化TabBar外观
        .onAppear {
            updateTabBarAppearance()
        }
    }
    
    private func getColorScheme(input: String) -> ColorScheme? {
        switch input {
        case "light":
            return .light
        case "dark":
            return .dark
        default:
            return nil
        }
    }
    
    private func updateTabBarAppearance() {
        let appearance = UITabBarAppearance()
        
        switch selectedAppAppearance {
        case "light":
            // 浅色模式下的TabBar样式
            appearance.backgroundColor = .systemBackground
            setTabItemColors(for: appearance, normalColor: .label, selectedColor: .tintColor)
        case "dark":
            // 深色模式下的TabBar样式
            appearance.backgroundColor = .systemBackground
            setTabItemColors(for: appearance, normalColor: .label, selectedColor: .tintColor)
        default:
            // 跟随系统时自动适配
            appearance.configureWithAutomaticBackground()
        }
        
        // 应用外观设置到全局TabBar
        UITabBar.appearance().standardAppearance = appearance
        UITabBar.appearance().scrollEdgeAppearance = appearance
    }
    
    // 统一设置TabItem的图标和文字颜色
    private func setTabItemColors(for appearance: UITabBarAppearance, normalColor: UIColor, selectedColor: UIColor) {
        appearance.stackedLayoutAppearance.normal.iconColor = normalColor
        appearance.stackedLayoutAppearance.normal.titleTextAttributes = [.foregroundColor: normalColor]
        appearance.stackedLayoutAppearance.selected.iconColor = selectedColor
        appearance.stackedLayoutAppearance.selected.titleTextAttributes = [.foregroundColor: selectedColor]
    }
}

#Preview {
    ContentView(selectedTab: 1)
}

代码说明 #

1. 监听与初始化：通过onChange监听外观选择的变化，同时在onAppear时初始化TabBar外观，确保应用启动时就生效。
2. 自定义TabBar外观：使用UITabBarAppearance设置TabBar的背景色、TabItem的图标和文字颜色，让它和SwiftUI的颜色Scheme同步。
3. 系统适配：当选择"跟随系统"时，调用configureWithAutomaticBackground()让TabBar自动适配系统的深色/浅色模式。

这样修改后，TabBar就能和自定义的外观设置保持一致了。

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