UIKit 和SwiftUI的混合开发

最新推荐文章于 2025-04-26 18:40:58 发布

lingjunjie

最新推荐文章于 2025-04-26 18:40:58 发布

阅读量519

点赞数 5

文章标签： swiftui xcode Swift

本文链接：https://blog.youkuaiyun.com/lingjunjie/article/details/146044414

版权

在 iOS 开发中，UIKit 和 SwiftUI 是两种不同的 UI 框架。UIKit 是传统的基于视图和控制器的框架，而 SwiftUI 是苹果推出的声明式 UI 框架，具有更简洁的语法和更强的跨平台支持。在实际开发中，将两者混合使用，以充分利用两者的优点。

在 UIKit 中嵌入 SwiftUI

如果你正在开发一个基于 UIKit 的项目，但希望引入 SwiftUI 的部分组件，可以使用 UIHostingController 将 SwiftUI 视图嵌入到 UIKit 中。

import UIKit
import SwiftUI

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 创建 SwiftUI 视图
        let swiftUIView = SwiftUIView(message: "Hello from SwiftUI!")
        
        // 使用 UIHostingController 包装 SwiftUI 视图
        let hostingController = UIHostingController(rootView: swiftUIView)
        
        // 将 SwiftUI 视图添加到当前视图层级
        addChild(hostingController)
        hostingController.view.frame = CGRect(x: 0, y: 100, width: view.bounds.width, height: 200)
        view.addSubview(hostingController.view)
        hostingController.didMove(toParent: self)
    }
}

// 定义一个简单的 SwiftUI 视图
struct SwiftUIView: View {
    var message: String
    
    var body: some View {
        Text(message)
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(8)
    }
}

在 SwiftUI 中嵌入 UIKit

如果你正在开发一个基于 SwiftUI 的项目，但需要使用某些 UIKit 组件（例如复杂的自定义控件或第三方库），可以使用 UIViewRepresentable 或 UIViewControllerRepresentable 将 UIKit 组件嵌入到 SwiftUI 中。

步骤：
创建一个符合 UIViewRepresentable 或 UIViewControllerRepresentable 协议的结构体。
实现协议方法，将 UIKit 组件包装为 SwiftUI 可用的视图。

import SwiftUI
import UIKit

struct ContentView: View {
    var body: some View {
        VStack {
            Text("SwiftUI View")
            CustomUIKitView()
        }
    }
}

// 将 UIKit 的 UIView 包装为 SwiftUI 视图
struct CustomUIKitView: UIViewRepresentable {
    func makeUIView(context: Context) -> UILabel {
        let label = UILabel()
        label.text = "Hello from UIKit!"
        label.textAlignment = .center
        label.backgroundColor = .lightGray
        return label
    }
    
    func updateUIView(_ uiView: UILabel, context: Context) {
        // 更新 UIView 的内容（如果需要）
        uiView.text = "Updated from UIKit!"
    }
}

在 SwiftUI 中嵌入 UIViewController

如果需要嵌入一个完整的 UIViewController（例如 UITableViewController 或 UINavigationController），可以使用 UIViewControllerRepresentable。

import SwiftUI
import UIKit

struct ContentView: View {
    var body: some View {
        VStack {
            Text("SwiftUI View")
            CustomUIKitViewController()
        }
    }
}

// 将 UIKit 的 UIViewController 包装为 SwiftUI 视图
struct CustomUIKitViewController: UIViewControllerRepresentable {
    func makeUIViewController(context: Context) -> UITableViewController {
        let tableViewController = UITableViewController()
        tableViewController.tableView.register(UITableViewCell.self, forCellReuseIdentifier: "Cell")
        tableViewController.tableView.dataSource = context.coordinator
        return tableViewController
    }
    
    func updateUIViewController(_ uiViewController: UITableViewController, context: Context) {
        // 更新 UIViewController 的内容（如果需要）
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator()
    }
    
    class Coordinator: NSObject, UITableViewDataSource {
        let data = ["Row 1", "Row 2", "Row 3"]
        
        func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
            return data.count
        }
        
        func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
            let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
            cell.textLabel?.text = data[indexPath.row]
            return cell
        }
    }
}

数据传递与交互

在混合开发中，UIKit 和 SwiftUI 之间可能需要进行数据传递或交互。可以通过以下方式实现：

从 UIKit 向 SwiftUI 传递数据

struct SwiftUIView: View {
    @Binding var message: String
    
    var body: some View {
        Text(message)
    }
}

class ViewController: UIViewController {
    @State private var message = "Hello from UIKit"
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let swiftUIView = SwiftUIView(message: $message)
        let hostingController = UIHostingController(rootView: swiftUIView)
        addChild(hostingController)
        hostingController.view.frame = view.bounds
        view.addSubview(hostingController.view)
        hostingController.didMove(toParent: self)
    }
}

从 SwiftUI 向 UIKit 传递数据

使用回调函数或委托模式将数据从 SwiftUI 传递到 UIKit。

struct SwiftUIView: View {
    var onButtonTap: () -> Void
    
    var body: some View {
        Button("Tap Me") {
            onButtonTap()
        }
    }
}

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let swiftUIView = SwiftUIView {
            print("Button tapped in SwiftUI!")
        }
        let hostingController = UIHostingController(rootView: swiftUIView)
        addChild(hostingController)
        hostingController.view.frame = view.bounds
        view.addSubview(hostingController.view)
        hostingController.didMove(toParent: self)
    }
}