MakeXYZ Fun

[Video Summary] Ch. 6.5 Using AsyncImage in SwiftUI to get Images via the Internet (2024)

Admin -

Mô tả nhanh

Video này hướng dẫn cách sử dụng AsyncImage trong SwiftUI để tải ảnh từ internet, bao gồm cách sử dụng placeholder và các tùy chỉnh khác.

Video

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

Mô tả chi tiết

Video này trình bày cách sử dụng AsyncImage trong SwiftUI để lấy ảnh từ internet. AsyncImage hỗ trợ việc hiển thị ảnh placeholder trong khi ảnh đang được tải, cũng như tùy chỉnh các thuộc tính của ảnh và placeholder.

  • Sử dụng AsyncImage với URL:
    • Khởi tạo AsyncImage với URL của ảnh cần tải.
    • Cung cấp một placeholder để hiển thị trong khi ảnh đang tải.
    • Sử dụng trailing closure để tùy chỉnh ảnh đã tải và placeholder.
  • Các tùy chỉnh:
    • Có thể tùy chỉnh cả ảnh trả về và placeholder bằng các modifier như resizable() và scaledToFit().
    • Có thể đặt frame và padding cho cả AsyncImage và placeholder.
  • Demo:
    • Video sau đó demo việc sử dụng AsyncImage trong một ứng dụng thực tế, tải hình ảnh Pokemon từ một URL.
    • Thay thế image cũ (sử dụng system image) bằng AsyncImage.
    • Sử dụng một hình chữ nhật bo góc trong suốt làm placeholder (có thể thay bằng một ProgressView).
    • Thử nghiệm hình ảnh dấu chấm hỏi trong hình vuông dạng dashed làm placeholder.
  • Các bước thực hiện:
    1. Comment code image cũ. Thay thế bằng AsyncImage.
    2. Khởi tạo URL từ string creaturDetail.imageURL.
    3. Đặt tên cho image trả về là image.
    4. Thêm các modifier resizable và scaledToFit cho image.
    5. Tạo placeholder bằng RoundedRectangle trong suốt.
    6. Đặt frame và padding cho AsyncImage ở ngoài closure.
    7. Xóa code image cũ.
    8. Kiểm tra kết quả trong ứng dụng.

Mong rằng bạn sẽ tiếp tục khám phá thêm nhiều kiến thức lập trình thú vị!