SwiftUI、AppKit和UIKit之间的桥接视图

SwiftUI、UIKit、AppKit 三者之间的桥接关系图

各种桥接控制器和协议总览

1、SwiftUI桥接AppKit

1）SwiftUI嵌入AppKit的NSView层级，使用NSHostingView桥接视图。

2）SwiftUI嵌入AppKit的NSViewController层级，使用NSHostingController桥接视图控制器。

2、SwiftUI桥接UIKit

1）SwiftUI嵌入UIKit的UIViewController，使用UIHostingController桥接控制器。

2）SwiftUI嵌入UIKit表格，使用UIHostingConfiguration(iOS 16+），用于UITableViewCell、UICollectionViewCell。

3、AppKit桥接SwiftUI

1）AppKit的NSView嵌入SwiftUI，使用NSViewRepresentable桥接控制器。

2）AppKit的NSViewController嵌入SwiftUI，使用NSViewControllerRepresentable桥接控制器。

4、UIKit桥接SwiftUI

1）UIKit的UIView嵌入SwiftUI，使用UIViewRepresentable桥接控制器。

2）UIKit的UIViewController嵌入SwiftUI，使用UIViewControllerRepresentable桥接控制器。

各桥接控制器用途

1、SwiftUI 嵌入 UIKit / AppKit

NSHostingView（macOS）：SwiftUI → NSView，用在 AppKit 的视图树中，可以直接添加到窗口或视图中。

let view = NSHostingView(rootView: MySwiftUIView())
someNSView.addSubview(view)

NSHostingController（macOS）：SwiftUI → NSViewController，更安全的方式，用于设置 window.contentViewController。

let controller = NSHostingController(rootView: MySwiftUIView())
window.contentViewController = controller

UIHostingController（iOS）：SwiftUI → UIViewController，常用于 UIKit 项目嵌入 SwiftUI。

let controller = UIHostingController(rootView: MySwiftUIView())
navigationController?.pushViewController(controller, animated: true)

UIHostingConfiguration（iOS 16+）：用于 UITableViewCell 或 UICollectionViewCell 中直接嵌 SwiftUI，更轻量、无需 controller。

cell.contentConfiguration = UIHostingConfiguration {
    MySwiftUIView()
}

2、UIKit / AppKit 嵌入 SwiftUI

如果希望在 SwiftUI 中嵌入原生 UIKit 或 AppKit 控件：

NSViewRepresentable（macOS）：用于嵌入 NSView。

struct MyNSView: NSViewRepresentable {
    func makeNSView(context: Context) -> NSButton {
        let button = NSButton(title: "macOS Button", target: nil, action: nil)
        return button
    }
    func updateNSView(_ nsView: NSButton, context: Context) {}
}

NSViewControllerRepresentable（macOS）：用于嵌入 NSViewController，如 NSOpenPanel, NSTabViewController 等：

struct MyViewControllerWrapper: NSViewControllerRepresentable {
    func makeNSViewController(context: Context) -> MyAppKitViewController {
        MyAppKitViewController()
    }
    func updateNSViewController(_ nsViewController: MyAppKitViewController, context: Context) {}
}

UIViewRepresentable（iOS）

struct MyUIKitView: UIViewRepresentable {
    func makeUIView(context: Context) -> UILabel {
        let label = UILabel()
        label.text = "Hello from UIKit"
        return label
    }
    func updateUIView(_ uiView: UILabel, context: Context) {}
}

UIViewControllerRepresentable（iOS）

struct MyUIKitControllerWrapper: UIViewControllerRepresentable {
    func makeUIViewController(context: Context) -> MyViewController {
        MyViewController()
    }
    func updateUIViewController(_ uiViewController: MyViewController, context: Context) {}
}

总结

SwiftUI桥接AppKit，可以使用NSHostingView / NSHostingController显示SwiftUI视图。

SwiftUI桥接UIKit，可以使用UIHostingController / UIHostingConfiguration显示视图，

UIKit桥接SwiftUI，可以使用UIViewRepresentable / UIViewControllerRepresentable显示UIKit视图。

AppKit桥接SwiftUI，可以使用NSViewRepresentable / NSViewControllerRepresentable显示AppKit视图。

相关文章

1、UIKit显示SwiftUI的桥接控制器UIHostingController：https://fangjunyu.com/2025/06/30/uikit%e6%98%be%e7%a4%baswiftui%e7%9a%84%e4%be%a8%e6%8e%a5%e6%8e%a7%e5%88%b6%e5%99%a8uihostingcontroller/

2、macOS显示SwiftUI的桥接控制器NSHostingController：https://fangjunyu.com/2025/06/30/macos%e6%98%be%e7%a4%baswiftui%e7%9a%84%e6%a1%a5%e6%8e%a5%e6%8e%a7%e5%88%b6%e5%99%a8nshostingcontroller/