[Video Summary] Ch. 8.20 Click to Display or Edit an Image from a SwiftUI Horizontal Scroll View (Snacktacular app)

Mô tả nhanh

Video này hướng dẫn cách thêm chức năng click vào ảnh trong scroll view ngang để mở ảnh ở chế độ toàn màn hình và chỉnh sửa mô tả (nếu là ảnh của người dùng hiện tại).

Video

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

Mô tả chi tiết

Video này hướng dẫn cách thêm chức năng click vào ảnh trong scroll view ngang để mở ảnh ở chế độ toàn màn hình và chỉnh sửa mô tả (nếu là ảnh của người dùng hiện tại).

Các bước chi tiết:

1. Thêm State Variable và UI Image:
   • Tạo @State private var showPhotoViewer để hiển thị sheet chứa ảnh.
   • Tạo @State private var uiImage để lưu ảnh kiểu UIImage (chuyển từ SwiftUI.Image).
2. Bắt sự kiện Tap và chuyển đổi ảnh:
   • Thêm .onTapGesture vào AsyncImage.
   • Trong closure, tạo ImageRenderer từ AsyncImage.
   • Chuyển đổi SwiftUI.Image thành UIImage bằng renderer.uiImage. Sử dụng ?? UIImage() để tránh nil.
   • Gán giá trị UIImage vào biến uiImage.
   • Gọi showPhotoViewer.toggle() để hiển thị sheet.
3. Hiển thị Sheet:
   • Thêm .sheet dưới ScrollView với biến isPresented là showPhotoViewer.
   • Trong closure content, gọi PhotoView và truyền uiImage và spot.
4. Căn chỉnh Progress View:
   • Thêm modifier .frame(width: 80, height: 80) cho ProgressView để căn giữa.
5. Sửa Photo View:
   • Import Firebase để lấy thông tin người dùng.
   • Kiểm tra email người dùng hiện tại với email người đăng ảnh.
   • Nếu là người đăng ảnh:
     • Hiển thị nút "Cancel" và "Save".
   • Nếu không phải người đăng ảnh:
     • Hiển thị nút "Done".
     • Vô hiệu hóa text field chỉnh sửa mô tả.
   • Thay @State var photo bằng @Binding var photo để có thể truyền dữ liệu từ view ngoài.
   • Sửa lại PreviewProvider của PhotoView để phù hợp với việc binding.
6. Sửa SpotDetailView:
   • Tạo @State var newPhoto để lưu trữ photo mới.
   • Ở chỗ gọi photoView bằng sheet:
     • Thay vì truyền trực tiếp uiImage và spot, chúng ta truyền thêm photo
     • Sử dụng $newPhoto để binding với biến photo trong PhotoView.
   • Thêm vào on change modifier của photo picker một dòng code newPhoto = Photo() để clear dữ liệu mô tả của lần chọn trước.
7. Sửa SpotDetailPhotoScrollView:
   • Tạo @State var selectedPhoto để lưu trữ photo được chọn.
   • Trong .onTapGesture, gán selectedPhoto = photo (photo của item được chọn).
   • Trong sheet, truyền $selectedPhoto như một binding.
8. Sửa SpotViewModel:
   • Trong hàm saveImage, thay đổi let photoName thành var photoName.
   • Kiểm tra photo.id có null không. Nếu không:
     • Gán photoName bằng photo.id! để giữ nguyên ID khi update.
   • Nếu không, tạo mới photoName bằng UUID.
9. Sửa lỗi scale ảnh: Chuyển modifier scaleToFill lên trước modifier frame

Chúc bạn thực hành thành công!

Tags

• SwiftUI
• Swift
• Video Summary