使嵌入 Storyboard ViewController 的 SwiftUI 视图使用全屏宽度

Question

问题

您好，我需要有关 SwiftUI 视图的帮助，该视图由故事板中配置的视图控制器呈现。

我使用UIHostingController 提供了一个 SwiftUI 视图，包括它自己的模型，如本文所述：addSubView SwiftUI View to UIKit UIView in Swift。

现在我的视图在其托管视图控制器的 view 属性内缩小到其内容大小。

我尝试过的

• 将父视图控制器内的ContainerView 包装成两个StackViews 以强制视图使用整个屏幕（垂直和水平）
• 在我的 SwiftUI 视图中使用 .frame(minWidth: 0, maxWidth: .infinity) 配置初始 VStack
• 按照Make a VStack fill the width of the screen in SwiftUI 中的建议，在该堆栈内的所有元素下方和下方使用初始HStack 和Spacer()

一些代码

视图控制器：

class SomeParentViewController: UIViewController {

    var detailsView: DetailsOverlayView?                   //  --> SwiftUI View
    var detailsViewModel: DetailsOverlayViewModel?         //  --> Its model
    var childVC: UIHostingController<DetailsOverlayView>?  //  --> Child VC to present View
                                                           //      inside UIView
    var detailData: DetailData?
    

    override func viewDidLoad() {

        super.viewDidLoad()

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

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

        if let v = paymentDetailsView {
            child = UIHostingController(rootView: v)
            child?.view.translatesAutoresizingMaskIntoConstraints = false
            child?.view.frame = self.view.bounds
        }
    }

    override func viewWillAppear(_ animated: Bool) {

        super.viewWillAppear(animated)

        if let cvc = childVC {
            self.addSubview(cvc.view)
            self.addChild(cvc)
        }
    }
    ...
}

SwiftUI 视图：

...
    var body: some View {
        VStack(alignment: .leading, spacing: 16) {
            // Title
            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()
            }
        }
        .frame(minWidth: 0, maxWidth: .infinity)
        .padding(16)
    }
...

结果图片

Answer 1

考虑到包装在 UIHostingController 中的 SwiftUI 视图的行为方式与 UIViewController 的行为方式相同，您可以以相同的方式定义自动布局约束。

在声明translatesAutoresizingMaskIntoConstraints = false 之后，我将假设这是计划。在这种情况下，我的建议如下：

NSLayoutConstraint.activate([
  child.view.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
  child.view.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
  child.view.widthAnchor.constraint(equalTo: self.view.widthAnchor),
  child.view.heightAnchor.constraint(equalTo: self.view.heighAnchor)
])

以上内容使 UIHostingController 与父控制器大小相同并以它为中心。高度和宽度锚点可以是常数，这样您就可以使用.constraint(equalToConstant: 150)，或者您喜欢的任何其他变化。