UIHostingController承载SwiftUI视图时安全区域处理异常如何修复？

问题概述 #

通过UIHostingController将SwiftUI视图嵌入UIKit控制器时，SwiftUI视图的内容和背景会延伸到顶部状态栏、底部导航栏等系统安全区域，导致布局不符合预期。

关联代码 #

UIKit 宿主控制器代码 #

import SwiftUI
import UIKit

class ViewController: UIViewController {
    private var hosting: UIHostingController<SwiftUIView>!

    override func viewDidLoad() {
        super.viewDidLoad()

        hosting = .init(rootView: SwiftUIView())
        view.addSubview(hosting.view)
        hosting.view.frame = view.bounds
    }
}

SwiftUI 视图代码 #

import SwiftUI

struct SwiftUIView: View {
    var body: some View {
        VStack {
            Text("Hello, World!")
                .font(.title)
                .foregroundColor(.white)
            Spacer(minLength: 0)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(.red)
    }
}

修复方案 #

方案1：用Auto Layout约束替代直接设置Frame #

直接设置frame不会让宿主视图自动遵循父视图的安全区域规则，改用Auto Layout约束可以确保视图边界与安全区域对齐，同时适配屏幕旋转等场景：

override func viewDidLoad() {
    super.viewDidLoad()

    hosting = .init(rootView: SwiftUIView())
    hosting.view.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(hosting.view)

    NSLayoutConstraint.activate([
        hosting.view.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
        hosting.view.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
        hosting.view.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
        hosting.view.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
    ])
}

方案2：在SwiftUI视图内控制安全区域 #

如果需要背景延伸至安全区域外，但内容保持在安全区域内，可调整SwiftUI视图的布局：

struct SwiftUIView: View {
    var body: some View {
        VStack {
            Text("Hello, World!")
                .font(.title)
                .foregroundColor(.white)
            Spacer(minLength: 0)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(.red)
        // 给内容添加安全区域内边距
        .padding(.top, UIApplication.shared.windows.first?.safeAreaInsets.top ?? 0)
        .padding(.bottom, UIApplication.shared.windows.first?.safeAreaInsets.bottom ?? 0)
    }
}

若希望整个SwiftUI视图严格遵循安全区域，可明确设置不忽略安全区域边缘：

struct SwiftUIView: View {
    var body: some View {
        VStack {
            Text("Hello, World!")
                .font(.title)
                .foregroundColor(.white)
            Spacer(minLength: 0)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(.red)
        .ignoresSafeArea(edges: []) // 明确遵守所有安全区域边缘
    }
}

方案3：禁用UIKit视图的延伸布局 #

在UIKit宿主控制器中设置edgesForExtendedLayout为空，禁止视图延伸到安全区域外：

override func viewDidLoad() {
    super.viewDidLoad()
    
    edgesForExtendedLayout = [] // 关闭视图延伸至安全区域的行为
    
    hosting = .init(rootView: SwiftUIView())
    hosting.view.frame = view.bounds
    view.addSubview(hosting.view)
}

内容的提问来源于stack exchange，提问作者Dubon Ya'ar