UIKit 中的可扩展 SwiftUI 视图垂直居中

Question

我正在 UIKit 应用程序中集成一些新的 SwiftUI 视图，但遇到了问题。我已经研究了以下问题很长一段时间，但尚未找到原因和解决方案。当将 View 集成到 UIKit 中时，该问题尤其会出现。我正在尝试创建一个简单的可点击视图，点击时会垂直展开/折叠。

这就是 SwiftUI 视图的预览的样子（以及它应该如何表现）：
屏幕截图
视频

这是我在 UIKit 中实现 SwiftUI View 时得到的结果：
屏幕截图
视频

看起来即使我将 UIHostingController 视图的顶部操作限制为父视图，UIHostingController 视图也会垂直居中。

正如评论中提到的，我可以将 HostController 视图的底部限制到其父视图的底部，但这会使下面的内容无法交互。

我正在寻找一种解决方案，其中 HostController 视图约束（特别是高度）与 SwiftUI 视图框架匹配。

SwiftUI 视图的代码：

import SwiftUI

struct ColorView: View {
  @State var isCollapsed = true

  var body: some View {
    VStack {
      VStack(spacing: 5) {
        HStack {
          Spacer()
          Text("Title")
          Spacer()
        }
        .frame(height: 100)

        if !isCollapsed {
          HStack {
            Spacer()
            Text("description")
            Spacer()
          }
          .padding(40)
        }
      }
      .background(Color(isCollapsed ? UIColor.red : UIColor.blue))
      .onTapGesture {
        withAnimation {
          self.isCollapsed.toggle()
        }
      }

      Spacer()
    }
  }
}

struct ColorView_Previews: PreviewProvider {
  static var previews: some View {
    return ColorView()
  }
}

以及上述SwiftUI View的ViewController中的UIKit实现：

struct ViewControllerRepresentable: UIViewControllerRepresentable {
  typealias UIViewControllerType = ViewController

  func makeUIViewController(context: UIViewControllerRepresentableContext<ViewControllerRepresentable>) -> ViewControllerRepresentable.UIViewControllerType {
    return ViewController()
  }

  func updateUIViewController(_ uiViewController: ViewControllerRepresentable.UIViewControllerType, context: UIViewControllerRepresentableContext<ViewControllerRepresentable>) { }
}

class ViewController: UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()

    let colorView = ColorView()
    let colorController = UIHostingController(rootView: colorView)

    addChild(colorController)
    view.addSubview(colorController.view)
    colorController.didMove(toParent: self)

    colorController.view.translatesAutoresizingMaskIntoConstraints = false
    colorController.view.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
    colorController.view.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
    colorController.view.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
  }
}

struct ViewControllerRepresentable_Previews: PreviewProvider {
  static var previews: some View {
    Group {
      ViewControllerRepresentable()
    }
  }
}

任何帮助是极大的赞赏。

Answer 1

以下是在 iOS Single View Playground (Xcode 11.2) 中测试的代码快照。原文ColorView没有改动，所以下面不再重复。

UIKit UIViewController 中集成的 SwiftUI 视图的行为与纯 SwiftUI 环境中的行为相同。

import UIKit
import PlaygroundSupport
import SwiftUI

class MyViewController : UIViewController {
    override func loadView() {
        let view = UIView()
        view.backgroundColor = .white
        self.view = view
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        let child = UIHostingController(rootView: ColorView())
        addChild(child)
        self.view.addSubview(child.view)
        child.didMove(toParent: self)

        child.view.translatesAutoresizingMaskIntoConstraints = false
        child.view.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        child.view.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        child.view.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        child.view.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
    }
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()