iOS 15下UIKit与SwiftUI混合导航架构状态栏背景色适配问题

核心原因 #

iOS 15 对导航栏外观、SwiftUI 安全区渲染逻辑做了调整，UIHostingController 默认会在顶部安全区区域渲染系统默认白色背景，同时导航栏默认开启滚动边缘透明效果，最终导致状态栏和导航栏颜色不一致。你在Reveal中修改不生效是因为该背景由系统内部视图控制，直接修改UIHostingView属性会被系统重置。

可落地修复步骤 #

步骤1：全局统一配置导航栏外观（必须） #

在App启动入口（如AppDelegate的didFinishLaunchingWithOptions方法、SwiftUI App的init方法中）添加以下配置，统一导航栏普通状态、滚动边缘状态的外观：

if #available(iOS 15, *) {
    let appearance = UINavigationBarAppearance()
    // 替换为你项目中导航栏需要的背景色
    appearance.backgroundColor = .systemBlue
    // 按需配置导航栏标题、按钮样式
    appearance.titleTextAttributes = [.foregroundColor: UIColor.white]
    UINavigationBar.appearance().standardAppearance = appearance
    UINavigationBar.appearance().scrollEdgeAppearance = appearance
}

步骤2：清除UIHostingView的默认背景 #

你当前的PaddleMapView使用时，需要在SwiftUI侧添加修饰符清除背景、适配安全区：

// 你在UIKit侧使用UIHostingController包装PaddleMapView时，先配置hostingController
let mapView = PaddleMapView(trip: trip, tripSpeeds: speeds)
    .background(.clear) // 清除SwiftUI侧默认背景
    .ignoresSafeArea(edges: .top) // 忽略顶部安全区，让内容顶到状态栏底部
let hostingVC = UIHostingController(rootView: mapView)
hostingVC.view.backgroundColor = .clear // 清除HostingController的默认背景
// 再push或present这个hostingVC即可

步骤3：兜底方案：手动添加状态栏背景层 #

如果以上配置仍不生效，可以在MapViewController中手动添加状态栏背景层，代码如下：

class MapViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        addStatusBarBackground()
    }
    
    private func addStatusBarBackground() {
        let statusBarView = UIView()
        // 替换为导航栏相同的背景色
        statusBarView.backgroundColor = .systemBlue
        statusBarView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(statusBarView)
        
        NSLayoutConstraint.activate([
            statusBarView.topAnchor.constraint(equalTo: view.topAnchor),
            statusBarView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            statusBarView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            statusBarView.heightAnchor.constraint(equalToConstant: UIApplication.shared.statusBarFrame.height)
        ])
        view.bringSubviewToFront(statusBarView)
    }
}

修改后的PaddleMapView代码参考 #

你的原有代码不需要做太多调整，仅需要保证返回的MapViewController的view背景色和导航栏一致即可：

import SwiftUI
import PaddleCloud

struct PaddleMapView: UIViewControllerRepresentable {
    typealias UIViewControllerType = MapViewController

    var trip: Trip
    var tripSpeeds: TripSpeeds
    
    func makeUIViewController(context: Context) -> MapViewController {
        let sb = UIStoryboard(name: "Map", bundle: nil)
        let mapVC = sb.instantiateInitialViewController() as! MapViewController
        mapVC.trip = trip
        mapVC.tripSpeeds = tripSpeeds
        // 可选：直接设置mapVC的view背景色和导航栏统一
        mapVC.view.backgroundColor = .systemBlue
        return mapVC
    }
    
    func updateUIViewController(_ uiViewController: MapViewController, context: Context) {}
}

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