SwiftUI中Map组件导致ToolBar/NavigationBar外观被覆盖问题求助

方案1：在MapView里直接强制覆盖Toolbar样式 #

Map组件会默认触发系统的滚动边缘样式，直接在Map所在View里加这些修饰符就能覆盖：

struct MapView: View {
    var body: some View {
        Map()
            // 设置导航栏和TabBar背景色
            .toolbarBackground(Color("White"), for: .navigationBar)
            .toolbarBackground(Color("White"), for: .tabBar)
            // 直接隐藏导航栏的阴影分隔线
            .toolbar(.hidden, for: .navigationBarSeparator)
            // 隐藏TabBar的阴影分隔线
            .toolbar(.hidden, for: .tabBarSeparator)
            // 强制指定浅色配色，避免系统自动切换
            .toolbarColorScheme(.light, for: .navigationBar)
            .toolbarColorScheme(.light, for: .tabBar)
    }
}

方案2：补全全局UIKit配置的缺失项 #

之前的全局初始化代码大概率没设置scrollEdgeAppearance，Map滚动时会自动切换到这个样式，导致之前的配置失效。修改Root的初始化代码：

init() {
    // 配置导航栏
    let navAppearance = UINavigationBarAppearance()
    navAppearance.backgroundColor = UIColor(named: "White")
    navAppearance.shadowColor = .clear // 彻底去掉阴影
    // 必须同时设置默认样式和滚动边缘样式
    UINavigationBar.appearance().standardAppearance = navAppearance
    UINavigationBar.appearance().scrollEdgeAppearance = navAppearance
    
    // 配置TabBar
    let tabAppearance = UITabBarAppearance()
    tabAppearance.backgroundColor = UIColor(named: "White")
    tabAppearance.shadowColor = .clear
    UITabBar.appearance().standardAppearance = tabAppearance
    UITabBar.appearance().scrollEdgeAppearance = tabAppearance
    
    // 配置Toolbar
    let toolbarAppearance = UIToolbarAppearance()
    toolbarAppearance.backgroundColor = UIColor(named: "White")
    toolbarAppearance.shadowColor = .clear
    UIToolbar.appearance().standardAppearance = toolbarAppearance
    UIToolbar.appearance().scrollEdgeAppearance = toolbarAppearance
}

方案3：极端情况用VC代理强制设置 #

如果上面两种方法都不管用，就直接拿到Map对应的底层VC，硬改样式：

struct MapView: View {
    // 复用全局的外观配置
    private let navAppearance: UINavigationBarAppearance = {
        let appearance = UINavigationBarAppearance()
        appearance.backgroundColor = UIColor(named: "White")
        appearance.shadowColor = .clear
        return appearance
    }()
    
    private let tabAppearance: UITabBarAppearance = {
        let appearance = UITabBarAppearance()
        appearance.backgroundColor = UIColor(named: "White")
        appearance.shadowColor = .clear
        return appearance
    }()
    
    var body: some View {
        Map()
            .background(UIViewControllerWrapper { vc in
                // 强制给当前导航栏设置样式
                vc.navigationController?.navigationBar.standardAppearance = navAppearance
                vc.navigationController?.navigationBar.scrollEdgeAppearance = navAppearance
                // 强制给TabBar设置样式
                vc.tabBarController?.tabBar.standardAppearance = tabAppearance
                vc.tabBarController?.tabBar.scrollEdgeAppearance = tabAppearance
            })
    }
}

// 辅助工具：获取当前页面的VC
struct UIViewControllerWrapper: UIViewControllerRepresentable {
    let callback: (UIViewController) -> Void
    
    func makeUIViewController(context: Context) -> UIViewController {
        let vc = UIViewController()
        DispatchQueue.main.async { callback(vc) }
        return vc
    }
    
    func updateUIViewController(_ uiViewController: UIViewController, context: Context) {}
}

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