SwiftUI TabBar外观仅在含Map的视图中失效，如何统一样式？

问题核心是MapKit的Map组件加载时会覆盖UITabBar的全局外观配置，导致样式变回默认。以下是两种可靠的解决方法：

方法一：App启动时全局配置TabBar样式 #

将TabBar外观设置移到App的初始化方法中，确保配置在整个App生命周期内生效，不会被单个组件覆盖：

@main
struct YourAppName: App {
    init() {
        let appearance = UITabBarAppearance()
        appearance.configureWithOpaqueBackground()
        appearance.backgroundColor = .appBlue
        
        // 未选中状态样式
        appearance.stackedLayoutAppearance.normal.iconColor = .appAliceBlue.withAlphaComponent(0.5)
        appearance.stackedLayoutAppearance.normal.titleTextAttributes = [
            .foregroundColor: UIColor.appAliceBlue.withAlphaComponent(0.5)
        ]
        
        // 选中状态样式
        appearance.stackedLayoutAppearance.selected.iconColor = .appColumbiaBlue
        appearance.stackedLayoutAppearance.selected.titleTextAttributes = [
            .foregroundColor: UIColor.appColumbiaBlue
        ]
        
        // 应用到所有TabBar实例
        UITabBar.appearance().standardAppearance = appearance
        UITabBar.appearance().scrollEdgeAppearance = appearance
        // 关键：设置inlineAppearance，防止Map组件触发样式重置
        UITabBar.appearance().inlineAppearance = appearance
    }
    
    var body: some Scene {
        WindowGroup {
            LandlordTabView()
        }
    }
}

方法二：在Map视图中强制恢复样式 #

如果不想全局配置，可以在Map视图的onAppear和onDisappear事件中重新设置样式，同时加入延迟确保Map加载完成后生效：

修改LandlordMapView代码：

import SwiftUI
import MapKit

struct LandlordMapView: View {
    // 抽取TabBar配置为复用方法
    private func setupTabBarStyle() {
        let appearance = UITabBarAppearance()
        appearance.configureWithOpaqueBackground()
        appearance.backgroundColor = .appBlue
        
        appearance.stackedLayoutAppearance.normal.iconColor = .appAliceBlue.withAlphaComponent(0.5)
        appearance.stackedLayoutAppearance.normal.titleTextAttributes = [
            .foregroundColor: UIColor.appAliceBlue.withAlphaComponent(0.5)
        ]
        
        appearance.stackedLayoutAppearance.selected.iconColor = .appColumbiaBlue
        appearance.stackedLayoutAppearance.selected.titleTextAttributes = [
            .foregroundColor: UIColor.appColumbiaBlue
        ]
        
        UITabBar.appearance().standardAppearance = appearance
        UITabBar.appearance().scrollEdgeAppearance = appearance
        UITabBar.appearance().inlineAppearance = appearance
    }
    
    var body: some View {
        VStack {
            Text("Properties")
                .padding(.bottom, 10)
                .frame(maxWidth: .infinity)
                .font(.system(size: 30))
                .foregroundColor(.appAliceBlue)
                .background(Color.appBlue)
                .fontWeight(.bold)

            Map()
                .frame(height: 200)
            Spacer()
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.appColumbiaBlue)
        .onAppear {
            // 延迟执行，确保Map加载完成后覆盖其重置的样式
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
                setupTabBarStyle()
            }
        }
        .onDisappear {
            // 切出Map页面时恢复样式
            setupTabBarStyle()
        }
    }
}

#Preview {
    LandlordMapView()
}

为什么之前的方法无效？ #

MapKit的Map组件内部会创建UIKit原生的MKMapView，这个组件在初始化时可能会重置UITabBar的inlineAppearance属性，而你之前只设置了standardAppearance和scrollEdgeAppearance，缺少对inlineAppearance的配置，导致样式被覆盖。

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