[Video Summary] Ch. 3.3 PhotosPicker in SwiftUI BipTheGuy app

Mô tả nhanh

Video này hướng dẫn cách sử dụng PhotosPicker trong SwiftUI để người dùng có thể chọn ảnh từ thư viện ảnh của họ trong ứng dụng BipTheGuy. Video cũng trình bày cách chuyển đổi một PhotosPickerItem thành một Image trong SwiftUI, sử dụng loadTransferable, xử lý bất đồng bộ với async và await, và cách sử dụng try và try?.

Video

Click vào hình dưới để mở:

Mô tả chi tiết

Video này hướng dẫn cách sử dụng PhotosPicker trong SwiftUI để người dùng có thể chọn ảnh từ thư viện ảnh của họ trong ứng dụng BipTheGuy. Video cũng trình bày cách chuyển đổi một PhotosPickerItem thành một Image trong SwiftUI, sử dụng loadTransferable, xử lý bất đồng bộ với async và await, và cách sử dụng try và try?.

Các bước chính trong video bao gồm:

1. Import PhotosUI: Vì PhotosPicker không thuộc core của SwiftUI, cần phải import PhotosUI.
2. Khai báo biến state selectedPhoto: Biến này kiểu PhotosPickerItem? để lưu trữ item ảnh được chọn (có thể là nil nếu không có ảnh nào được chọn).
3. Thay thế Button bằng PhotosPicker: Thay vì dùng Button để chọn ảnh như trước, ta dùng PhotosPicker view.
   • PhotosPicker có tham số selection để ràng buộc với biến selectedPhoto.
   • Label của Button cũ được tái sử dụng trong PhotosPicker.
4. Tùy chỉnh PhotosPicker:
   • matching: .images: Lọc chỉ hiển thị ảnh trong thư viện.
   • preferredEncoding: .automatic để iOS tự chọn encoding phù hợp
5. Sử dụng Modifier onChange: Khi người dùng chọn ảnh, modifier này sẽ được kích hoạt và thực hiện các bước sau:
   • Chuyển đổi PhotosPickerItem thành Data: Sử dụng loadTransferable(type: Data.self) để lấy data từ PhotoPickerItem. Hàm này cần await vì nó là hàm bất đồng bộ (async). Cần đặt trong Task {} để thực hiện bất đồng bộ.
   • Chuyển đổi Data thành UIImage: Sử dụng UIImage(data:) để chuyển data thành UIImage.
   • Chuyển đổi UIImage thành Image trong SwiftUI: Tạo một biến @State private var bipImage = Image("clown") để lưu trữ Image. Sau đó dùng bipImage = Image(uiImage:) để hiển thị ảnh.
6. Xử lý lỗi: Có 3 cách xử lý lỗi khi loadTransferable có thể throw error:
   • Sử dụng do-try-catch: đây là cách đầy đủ, có thể bắt và xử lý error.
   • Sử dụng try?: bỏ qua error, nếu error sẽ trả về nil. Có thể dùng guard let để xử lý trường hợp nil.
   • Sử dụng if let với try: tương tự như try?, có thể bỏ qua việc xử lý lỗi.
7. Lưu ý về "Magenta Bush": Cảnh báo về một bức ảnh "magenta bush" trong thư viện ảnh simulator có thể gây lỗi không xác định.

Video kết thúc bằng việc thử nghiệm ứng dụng trên simulator, thêm ảnh vào simulator, và minh họa lại lỗi với 'Magenta Bush'.