UIViewRepresentable 在 SwiftUI 中的使用（中文介绍）

UIViewRepresentable 是 SwiftUI 提供的一个协议，用于在 SwiftUI 视图中嵌入 UIKit 的 UIView 或 UIViewController。它允许你在 SwiftUI 中使用 UIKit 组件，实现更复杂的功能或复用现有的 UIKit 代码。

1. 为什么需要 UIViewRepresentable？

• 兼容 UIKit：某些 UIKit 组件（如 MKMapView、WKWebView、UIScrollView）在 SwiftUI 中没有原生替代品。
• 复用现有代码：如果你已经有成熟的 UIKit 代码，可以直接集成到 SwiftUI 中。
• 更精细的控制：UIKit 提供了一些 SwiftUI 尚未支持的功能（如手势识别、动画控制）。

2. UIViewRepresentable 的基本结构

要使用 UIViewRepresentable，你需要实现以下方法：

1. makeUIView(context:)：创建并返回 UIKit 的 UIView。
2. updateUIView(_:context:)：当 SwiftUI 状态变化时更新 UIView。
3. makeCoordinator()（可选）：提供一个协调器（Coordinator），用于处理 UIKit 的事件回调（如代理方法）。

示例：在 SwiftUI 中使用 UILabel

import SwiftUI
import UIKit

struct MyUILabel: UIViewRepresentable {
    var text: String
    
    // 创建 UIKit 的 UILabel
    func makeUIView(context: Context) -> UILabel {
        let label = UILabel()
        label.text = text
        label.textColor = .red
        return label
    }
    
    // 更新 UILabel（当 SwiftUI 状态变化时调用）
    func updateUIView(_ uiView: UILabel, context: Context) {
        uiView.text = text
    }
}

// 在 SwiftUI 中使用
struct ContentView: View {
    var body: some View {
        MyUILabel(text: "Hello, UIKit!")
    }
}

3. 使用 Coordinator 处理 UIKit 事件

UIKit 组件通常使用 代理模式（Delegate） 或 目标-动作模式（Target-Action） 来处理事件（如按钮点击、手势识别）。在 SwiftUI 中，我们可以使用 Coordinator 来桥接这些事件。

示例：在 SwiftUI 中使用 UITextField 并监听输入

struct MyTextField: UIViewRepresentable {
    @Binding var text: String
    
    // 创建 UITextField
    func makeUIView(context: Context) -> UITextField {
        let textField = UITextField()
        textField.borderStyle = .roundedRect
        textField.delegate = context.coordinator // 设置代理
        return textField
    }
    
    // 更新 UITextField
    func updateUIView(_ uiView: UITextField, context: Context) {
        uiView.text = text
    }
    
    // 创建 Coordinator（处理 UITextField 代理方法）
    func makeCoordinator() -> Coordinator {
        Coordinator(text: $text)
    }
    
    // Coordinator 类
    class Coordinator: NSObject, UITextFieldDelegate {
        @Binding var text: String
        
        init(text: Binding<String>) {
            _text = text
        }
        
        // 监听输入变化
        func textFieldDidChangeSelection(_ textField: UITextField) {
            text = textField.text ?? ""
        }
    }
}

// 在 SwiftUI 中使用
struct ContentView: View {
    @State private var inputText = ""
    
    var body: some View {
        VStack {
            MyTextField(text: $inputText)
            Text("输入的内容: \(inputText)")
        }
    }
}

4. 常见使用场景

(1) 使用 WKWebView（网页浏览器）

import WebKit

struct WebView: UIViewRepresentable {
    let url: URL
    
    func makeUIView(context: Context) -> WKWebView {
        return WKWebView()
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {
        let request = URLRequest(url: url)
        uiView.load(request)
    }
}

// 使用方式
WebView(url: URL(string: "https://apple.com")!)

(2) 使用 UIScrollView（滚动视图）

struct CustomScrollView: UIViewRepresentable {
    var content: () -> UIView
    
    func makeUIView(context: Context) -> UIScrollView {
        let scrollView = UIScrollView()
        let contentView = content()
        scrollView.addSubview(contentView)
        
        // 设置约束（使用 Auto Layout）
        contentView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            contentView.widthAnchor.constraint(equalTo: scrollView.widthAnchor),
            contentView.heightAnchor.constraint(equalTo: scrollView.heightAnchor)
        ])
        
        return scrollView
    }
    
    func updateUIView(_ uiView: UIScrollView, context: Context) {}
}

// 使用方式
CustomScrollView {
    let label = UILabel()
    label.text = "这是一个 UIScrollView"
    return label
}

(3) 使用 UIPanGestureRecognizer（拖拽手势）

struct DragView: UIViewRepresentable {
    @Binding var offset: CGSize
    
    func makeUIView(context: Context) -> UIView {
        let view = UIView()
        view.backgroundColor = .blue
        
        let gesture = UIPanGestureRecognizer(
            target: context.coordinator,
            action: #selector(Coordinator.handleDrag)
        )
        view.addGestureRecognizer(gesture)
        return view
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {}
    
    func makeCoordinator() -> Coordinator {
        Coordinator(offset: $offset)
    }
    
    class Coordinator: NSObject {
        @Binding var offset: CGSize
        
        init(offset: Binding<CGSize>) {
            _offset = offset
        }
        
        @objc func handleDrag(_ gesture: UIPanGestureRecognizer) {
            offset = gesture.translation(in: gesture.view)
        }
    }
}

// 使用方式
struct ContentView: View {
    @State private var offset = CGSize.zero
    
    var body: some View {
        DragView(offset: $offset)
            .frame(width: 100, height: 100)
            .offset(offset)
    }
}

5. 注意事项

1. 性能优化：updateUIView 可能会频繁调用，避免不必要的 UI 更新。
2. 生命周期管理：Coordinator 可以存储状态，但要注意内存管理（避免循环引用）。
3. UIKit 和 SwiftUI 交互：使用 @Binding 或 PassthroughSubject 在 UIKit 和 SwiftUI 之间传递数据。

总结

UIViewRepresentable 是 SwiftUI 和 UIKit 之间的桥梁，适用于：

• 使用 UIKit 特有组件（如 WKWebView、MKMapView）。
• 复用现有 UIKit 代码。
• 实现更复杂的手势或动画控制。

如果你需要在 SwiftUI 中使用 UIViewController，可以使用 UIViewControllerRepresentable，用法类似。