UIViewControllerRepresentable 和 UIViewRepresentable 的使用

在 SwiftUI 中，你可以使用 UIViewRepresentable 和 UIViewControllerRepresentable 来包装 UIKit 的视图和视图控制器，使得它们能够在 SwiftUI 中使用。下面将详细介绍这两个协议的用法和示例。

1. UIViewRepresentable

UIViewRepresentable 允许你将 UIKit 的视图（如 UILabel、UIButton 等）嵌入到 SwiftUI 中。

使用步骤

  1. 创建一个遵循 UIViewRepresentable 的结构体。
  2. 实现 makeUIView(context:) 方法来创建和返回 UIKit 视图。
  3. 实现 updateUIView(_:context:) 方法来更新视图的状态。
  4. （可选）实现 makeCoordinator() 方法来创建协调器以处理用户交互。

示例：使用 UILabel

import SwiftUI

struct LabelView: UIViewRepresentable {
    var text: String

    // 创建 UILabel 实例
    func makeUIView(context: Context) -> UILabel {
        let label = UILabel()
        label.textAlignment = .center
        return label
    }

    // 更新 UILabel 的内容
    func updateUIView(_ uiView: UILabel, context: Context) {
        uiView.text = text
    }
}

struct ContentView: View {
    var body: some View {
        LabelView(text: "Hello, UIKit in SwiftUI!")
            .padding()
            .font(.title)
    }
}

2. UIViewControllerRepresentable

UIViewControllerRepresentable 允许你将 UIKit 的视图控制器（如 UIImagePickerController、UIAlertController 等）嵌入到 SwiftUI 中。

使用步骤

  1. 创建一个遵循 UIViewControllerRepresentable 的结构体。
  2. 实现 makeUIViewController(context:) 方法来创建和返回 UIKit 视图控制器。
  3. 实现 updateUIViewController(_:context:) 方法来更新视图控制器的状态。
  4. 创建协调器以处理 UIKit 控件的代理方法。

示例：使用 UIImagePickerController

import SwiftUI
import UIKit

struct ImagePicker: UIViewControllerRepresentable {
    @Binding var image: UIImage?
    var sourceType: UIImagePickerController.SourceType

    // 创建 UIImagePickerController 实例
    func makeUIViewController(context: Context) -> UIImagePickerController {
        let picker = UIImagePickerController()
        picker.delegate = context.coordinator
        picker.sourceType = sourceType
        return picker
    }

    // 更新 UIImagePickerController
    func updateUIViewController(_ uiViewController: UIImagePickerController, context: Context) {}

    // 创建 Coordinator
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    class Coordinator: NSObject, UINavigationControllerDelegate, UIImagePickerControllerDelegate {
        var parent: ImagePicker

        init(_ parent: ImagePicker) {
            self.parent = parent
        }

        // 处理选择的图像
        func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
            if let uiImage = info[.originalImage] as? UIImage {
                parent.image = uiImage
            }
            picker.dismiss(animated: true)
        }

        // 处理取消操作
        func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
            picker.dismiss(animated: true)
        }
    }
}

struct ContentView: View {
    @State private var image: UIImage?
    @State private var showingImagePicker = false

    var body: some View {
        VStack {
            Button("Select Image") {
                showingImagePicker = true
            }
            .sheet(isPresented: $showingImagePicker) {
                ImagePicker(image: $image, sourceType: .photoLibrary)
            }

            if let selectedImage = image {
                Image(uiImage: selectedImage)
                    .resizable()
                    .scaledToFit()
                    .frame(width: 200, height: 200)
            }
        }
    }
}

3. 总结

  • UIViewRepresentable：用于包装和使用 UIKit 视图，使其能够在 SwiftUI 中使用。适合简单的 UIKit 视图。
  • UIViewControllerRepresentable：用于包装和使用 UIKit 视图控制器，适合需要控制器生命周期管理的场景。
  • Coordinator：在这两个协议中，协调器用于处理用户交互和代理回调。

通过这两种方式，你可以在 SwiftUI 中利用 UIKit 的强大功能，实现更复杂和灵活的用户界面。

Last Updated::