如何在SwiftUI中使用ImagePicker？ - Lab.Lawliet

498 字

2 分钟

如何在SwiftUI中使用ImagePicker？

2021-08-07

2026-10-12

无标签

一：问题#

我的新项目中尝试性的使用了SwiftUI进行了一部分功能的构建。但当我需要访问相册选择图片的时候，缺犯难了。报出了下面的错误: 因为原有的一些代理需要要求NSObjectProtocol而我们SwifUI中的视图用的是Struct 而系统并没有提供在SwiftUI下调用相册的相关API，所以这里只能考虑自己去封装了。

二：SwiftUIImagePicker#

1
struct SwiftUIImagePicker {
2
    @Environment(\.presentationMode) var presentationMode
3
    @Binding var image: UIImage?
4
}
5

6
extension SwiftUIImagePicker: UIViewControllerRepresentable {
7
    func makeUIViewController(context: Context) -> some UIViewController {
8
        let picker = UIImagePickerController()
9
                return picker
10
    }
11

12
    func updateUIViewController(_ uiViewController: UIViewControllerType, context: Context) {
13

14
    }
15
}

2.1 UIViewControllerRepresentable#

这里使用了UIViewControllerRepresentable，我们的SwiftUIImagePicker就已经是一个标准的SwiftUI的View了。

当创建一个SwiftUIImagePicker，SwiftUI会自动调用makeUIViewController()并返回一个UIImagePickerController.

2.2 Coordinator 代理中间件#

由于SwiftUIImagePicker作为一个SwiftUI的View依旧不能使用NSObjectProtocol，所以我们需要一个中间件来完成代理。

UIViewControllerRepresentable中贴心的提供了这样一个中间件的定义，我们只要提供实现即可~

1
/// A type to coordinate with the view controller.
2
    associatedtype Coordinator = Void
3

4
    /// Creates the custom instance that you use to communicate changes from
5
    /// your view controller to other parts of your SwiftUI interface.
6
    ///
7
    /// Implement this method if changes to your view controller might affect
8
    /// other parts of your app. In your implementation, create a custom Swift
9
    /// instance that can communicate with other parts of your interface. For
10
    /// example, you might provide an instance that binds its variables to
11
    /// SwiftUI properties, causing the two to remain synchronized. If your view
12
    /// controller doesn't interact with other parts of your app, providing a
13
    /// coordinator is unnecessary.
14
    ///
15
    /// SwiftUI calls this method before calling the
16
    /// ``UIViewControllerRepresentable/makeUIViewController(context:)`` method.
17
    /// The system provides your coordinator either directly or as part of a
18
    /// context structure when calling the other methods of your representable
19
    /// instance.
20
    func makeCoordinator() -> Self.Coordinator

我们来实现一下下：

1
internal func makeCoordinator() -> SwiftUIImagePickerCoordinator {
2
    SwiftUIImagePickerCoordinator(self)
3
}

顺便实现一下选择完图片的代理方法吧：

1
func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
2
    if let uiImage = info[.originalImage] as? UIImage {
3
        parent.image = uiImage
4
    }
5
    parent.presentationMode.wrappedValue.dismiss()
6
}

别忘了设置一下代理：

1
picker.delegate = context.coordinator

三：参考#

Importing an image into SwiftUI using UIImagePickerController

UIKit混编时Dismiss掉HostController

从some看Swift不透明类型

二：SwiftUIImagePicker

2.1 UIViewControllerRepresentable

2.2 Coordinator 代理中间件