如何让Storyboard ViewController中嵌入的SwiftUI View占满全屏幕宽度

问题核心原因 #

1. UIKit侧添加子控制器逻辑不完整，且未给UIHostingController的view添加完整的上下左右约束，仅设置frame在translatesAutoresizingMaskIntoConstraints = false的场景下不会生效
2. SwiftUI侧仅配置了水平方向撑满的规则，未配置垂直方向撑满规则

修复步骤 #

1. 修复UIKit侧子控制器添加逻辑 #

替换原有viewWillAppear中的子控制器添加代码，补全约束和子控制器生命周期方法调用，也可将逻辑直接移到viewDidLoad中避免重复触发：

override func viewDidLoad() {
    super.viewDidLoad()

    if let data = detailData {
        detailsViewModel = DetailsOverlayViewModel(data: data)
    }

    if let m = detailsViewModel {
        detailsView = DetailsOverlayView(viewModel: m)
    }

    if let v = detailsView {
        childVC = UIHostingController(rootView: v)
        guard let childView = childVC?.view else { return }
        childView.translatesAutoresizingMaskIntoConstraints = false
        // 完整子控制器添加流程
        addChild(childVC!)
        // 如果是要加到指定的ContainerView就替换self.view为你的ContainerView实例
        self.view.addSubview(childView)
        // 加四边约束绑定父视图
        NSLayoutConstraint.activate([
            childView.topAnchor.constraint(equalTo: self.view.topAnchor),
            childView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
            childView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
            childView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor)
        ])
        childVC?.didMove(toParent: self)
    }
}

// 可以删掉原viewWillAppear里的子控制器添加逻辑，避免重复添加

2. 修复SwiftUI侧撑满配置 #

给根VStack的frame修饰符添加垂直方向撑满规则：

var body: some View {
    VStack(alignment: .leading, spacing: 16) {
        // 原有内容不变
        HStack {
            Text("My great and awesome title")
        }
        VStack(alignment: .leading, spacing: 0) {
            Text("My even more awesome subtitle")
            HStack(alignment: .top) {
                Text("on the left 1")
                Spacer()
                Text("on the right 1")
            }
            HStack(alignment: .top) {
                Text("on the left 2")
                Spacer()
                Text("on the right 2")
            }
            Divider()
        }
    }
    // 新增maxHeight: .infinity
    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading)
    .padding(16)
}

调试技巧 #

如果修改后仍有问题，可以先给childVC?.view设置一个醒目的背景色（比如.red），判断是UIHostingController的view没有撑满父容器，还是内部的SwiftUI内容没有撑满，可快速定位问题。

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