有没有办法在同一iOS Xcode项目中使用Storyboard和SwiftUI？

Question

随着Swift 5引入了用于创建视图的SwiftUI框架，但是我们目前正在使用情节提要进行UI设计。

所以我只想知道在同一iOS Single View应用程序中使用Storyboard和Swift UI的过程。

Answer 1

将 UIKit 与 SwiftUI 混合

两者都可以在故事板中嵌入和混合 SwiftUI，反之亦然

UIViewControllerRepresentable用于在 SwiftUI 中嵌入故事板

在 Storyboard 上创建 ViewController 并为其指定 Storyboard ID

import SwiftUI

struct ContentView: View {
    var body: some View {
        StoryboardViewController()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct StoryboardViewController: UIViewControllerRepresentable {
    func makeUIViewController(context: Context) -> some UIViewController {
        let storyboard = UIStoryboard(name: "Storyboard", bundle: Bundle.main)
        let controller = storyboard.instantiateViewController(identifier: "Main")
        return controller
    }
    
    func updateUIViewController(_ uiViewController: UIViewControllerType, context: Context) {
        
    }
}

UIKit 和 SwiftUI 之间的通信可以通过@Binding变量。这将使 SwiftUI 视图注入变量状态并控制它，当更改时将调用 func updateUIViewController来完成工作。

UIViewRepresentable对视图使用相同的方式

import SwiftUI

struct ContentView: View {
    @State var color = UIColor.green
    
    var body: some View {
        SampleView(color: $color).frame(width: 100, height: 100
                                        , alignment: .center)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}


struct SampleView: UIViewRepresentable {
    @Binding var color: UIColor
    
    func makeUIView(context: Context) -> some UIView {
        return UIView()
    }
    
    func updateUIView(_ uiView: UIViewType, context: Context) {
        uiView.backgroundColor = color
    }
}

UIHostingController用于在 UIKit 中嵌入 SwiftUI

首先是以编程方式创建

let childViewController = UIHostingController(rootView: SwiftUIContentView())
addChild(childViewController)
childViewController.view.frame = frame
view.addSubview(childViewController.view)
childViewController.didMove(toParent: self)

其次使用 Xcode 11，将 Hosting View Controller 添加到 Storyboard 并为其创建一个 Segue，然后通过 Control-drag 从 Segue 到 ViewController 创建一个 @IBSegueAction，然后创建 SwiftUI 视图的实例并将其传递给 HostingViewController 初始值设定项

第三种方法是将托管视图控制器添加到故事板，然后按照上面的答案中提到的方式对其进行子类化/sf/answers/4077519001/

Answer 2

我才开始看SwiftUI。分享一个小例子。

1. 在storyboard添加Hosting View Controller
2. UIHostingController用您自己的课程（ChildHostingController） 子类
3. ChildHostingController 应该看起来像这样：

import UIKit
import SwiftUI

struct SecondView: View {
  var body: some View {
      VStack {
          Text("Second View").font(.system(size: 36))
          Text("Loaded by SecondView").font(.system(size: 14))
      }
  }
}

class ChildHostingController: UIHostingController<SecondView> {

    required init?(coder: NSCoder) {
        super.init(coder: coder,rootView: SecondView());
    }

    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

有关更多详细信息，请参阅Custom UIHostingController
Apple Docs UIhostingController（不幸的是，尚未记录）
集成SwiftUI视频

Answer 3

是的，你可以这样做！以下是您可以采取的步骤：

1. 转到您当前的 Xcode 项目 -> Storyboard，单击 + 号（右上角）并搜索Hosting Controller（就像您搜索按钮或标签一样）。

2. 将托管控制器拖到您的故事板。创建从您的 UI 元素（我正在使用按钮）到该托管控制器的 Segue 连接，然后选择推送。创建从该 Segue 到您的视图控制器的插座连接（这是一个新功能 - 就像您为标签创建插座一样），并为其命名。

3. 在此出口连接内声明您的视图（您可以这样做，不必使用 PrepareForSegue 方法），然后返回它。

例如：我在当前项目中创建了一个 SwiftUI 视图（在 Xcode 中：文件 -> 新建 -> 文件 -> SwiftUI 视图）并将其命名为 DetailsView。我的插座连接看起来像这样：

import UIKit 
import SwiftUI

class ViewController: UIViewController {

    @IBSegueAction func showDetails(_ coder: NSCoder) -> UIViewController? {
        let detailsView = DetailsView()
        return UIHostingController(coder: coder, rootView: detailsView)
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        // some code

    }
}

就是这样！现在运行它。