如何在SwiftUI中引入调用BSImagePicker，并集成后将图片保存至数组

Hey there! Let's walk through how to use BSImagePicker in SwiftUI, including integrating it into your existing code and saving selected images to an array.

First, let's cover the basics of getting BSImagePicker up and running in your SwiftUI project:

• Step 1: Add the dependency & import
  Make sure you've added BSImagePicker to your project (via Swift Package Manager or CocoaPods). Once that's done, import it at the top of your SwiftUI file:

  import BSImagePicker
  

• Step 2: Wrap BSImagePicker for SwiftUI
  Since BSImagePicker is a UIKit-based library, we need to create a wrapper with UIViewControllerRepresentable to bridge it to SwiftUI. Here's the wrapper code:

  struct BSImagePickerView: UIViewControllerRepresentable {
      @Binding var isPresented: Bool
      @Binding var selectedImages: [UIImage]
      
      func makeUIViewController(context: Context) -> some UIViewController {
          let picker = BSImagePickerViewController()
          // Customize picker settings as needed
          picker.settings.selection.max = 10
          picker.settings.grid.columns = 3
          picker.delegate = context.coordinator
          return picker
      }
      
      func updateUIViewController(_ uiViewController: UIViewControllerType, context: Context) {}
      
      func makeCoordinator() -> Coordinator {
          Coordinator(self)
      }
      
      class Coordinator: NSObject, BSImagePickerViewControllerDelegate {
          let parent: BSImagePickerView
          
          init(_ parent: BSImagePickerView) {
              self.parent = parent
          }
          
          func imagePickerViewController(_ picker: BSImagePickerViewController, didSelect images: [UIImage]) {
              parent.selectedImages = images
              parent.isPresented = false
          }
          
          func imagePickerViewControllerDidCancel(_ picker: BSImagePickerViewController) {
              parent.isPresented = false
          }
      }
  }
  

• Step 3: Trigger the picker from your view
  Use a sheet or fullScreenCover to present the picker when a button is tapped. For example:

  struct BasicPickerView: View {
      @State private var showPicker = false
      @State private var selectedImages: [UIImage] = []
      
      var body: some View {
          Button("Select Photos") {
              showPicker = true
          }
          .sheet(isPresented: $showPicker) {
              BSImagePickerView(isPresented: $showPicker, selectedImages: $selectedImages)
          }
      }
  }
  

Now let's adapt this to your provided code structure. We'll add the necessary state variables, the picker wrapper, and hook up your camera button to trigger the picker:

import SwiftUI
import BSImagePicker

// Reuse the BSImagePicker wrapper we created
struct BSImagePickerView: UIViewControllerRepresentable {
    @Binding var isPresented: Bool
    @Binding var selectedImages: [UIImage]
    
    func makeUIViewController(context: Context) -> some UIViewController {
        let picker = BSImagePickerViewController()
        picker.settings.selection.max = 5 // Adjust max selection count as needed
        picker.delegate = context.coordinator
        return picker
    }
    
    func updateUIViewController(_ uiViewController: UIViewControllerType, context: Context) {}
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject, BSImagePickerViewControllerDelegate {
        let parent: BSImagePickerView
        
        init(_ parent: BSImagePickerView) {
            self.parent = parent
        }
        
        func imagePickerViewController(_ picker: BSImagePickerViewController, didSelect images: [UIImage]) {
            parent.selectedImages = images
            parent.isPresented = false
        }
        
        func imagePickerViewControllerDidCancel(_ picker: BSImagePickerViewController) {
            parent.isPresented = false
        }
    }
}

struct ContentView: View {
    // Add state to control picker presentation and store images
    @State private var showImagePicker = false
    @State private var selectedImages: [UIImage] = []
    
    var body: some View {
        // Your existing UI elements go here...
        
        Button(action: {
            // Trigger the image picker when the camera button is tapped
            showImagePicker = true
        }) {
            Image(systemName: "camera")
                .font(.title)
                .padding()
                .background(Color.blue)
                .foregroundColor(.white)
                .clipShape(Circle())
        }
        // Present the picker as a sheet
        .sheet(isPresented: $showImagePicker) {
            BSImagePickerView(isPresented: $showImagePicker, selectedImages: $selectedImages)
        }
        
        // Optional: Preview selected images (to confirm they're saved)
        ScrollView(.horizontal) {
            HStack(spacing: 8) {
                ForEach(selectedImages, id: \.self) { image in
                    Image(uiImage: image)
                        .resizable()
                        .scaledToFit()
                        .frame(height: 100)
                        .cornerRadius(8)
                }
            }
            .padding()
        }
    }
}

Quick Notes: #

• The @State variables showImagePicker controls when the picker appears, and selectedImages holds all the photos the user chooses.
• The coordinator in the wrapper handles communication between the UIKit picker and your SwiftUI view, passing selected images back to the array.
• You can tweak the picker's behavior (like selection limits or grid layout) by modifying the settings property of BSImagePickerViewController.

内容的提问来源于stack exchange，提问作者Yannick Sandermann