使 SwiftUI 視圖嵌入在 Storyboard 視圖控制器中使用全屏寬度

Question

問題

您好，我需要 SwiftUI 視圖的幫助，該視圖由在 storyboard 中配置的視圖 Controller 呈現。

I present a SwiftUI View including its own model using a UIHostingController as described in this post: addSubView SwiftUI View to UIKit UIView in Swift .

現在，我的視圖在其托管視圖控制器的view屬性中縮小到其內容大小。

我試過的

• 在Parent View Controller 中將一個ContainerView包裝成兩個StackViews來強制view 使用整個屏幕（垂直和水平）
• 使用 .frame .frame(minWidth: 0, maxWidth: .infinity)在我的 SwiftUI 視圖中配置初始VStack
• 按照使 VStack 填充 SwiftUI 中的屏幕寬度中的建議，在該堆棧內的所有元素下方和下方使用帶有Spacer()的初始HStack

一些代碼

查看 Controller：

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 與父 controller 大小相同並以它為中心。 高度和寬度錨點可以是常數，這樣您就可以.constraint(equalToConstant: 150)或您喜歡的任何其他變體。