MakeXYZ Fun

[Video Summary] Ch. 6.4 DetailView in SwiftUI - Catch 'em all App (2024)

Admin -

Mô tả nhanh

Video này hướng dẫn cách tạo Detail View trong SwiftUI cho ứng dụng Catch 'em all, tập trung vào việc thiết lập giao diện cơ bản và tạo một class mới để quản lý dữ liệu chi tiết của Pokémon (chiều cao, cân nặng và URL hình ảnh).

Video

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

Mô tả chi tiết

Video này hướng dẫn cách tạo Detail View trong SwiftUI cho ứng dụng Catch 'em all, tập trung vào việc thiết lập giao diện cơ bản và tạo một class mới để quản lý dữ liệu chi tiết của Pokémon (chiều cao, cân nặng và URL hình ảnh).

Các bước thực hiện bao gồm:

  1. Tạo Detail View:
    • Tạo một SwiftUI View mới tên là DetailView.
    • Sử dụng VStack để chứa các thành phần giao diện.
    • Thêm Text để hiển thị tên Pokémon với font chữ tùy chỉnh, in đậm, giới hạn dòng và căn trái.
    • Thêm Rectangle làm đường kẻ phân cách dưới tên Pokémon.
    • Sử dụng HStack để chứa hình ảnh và thông tin chiều cao cân nặng.
    • Thêm Image (tạm thời dùng hình mặc định) với background trắng, bo góc, đổ bóng và viền xám.
    • Thêm hai HStack lồng nhau để hiển thị "Height" và "Weight" cùng với giá trị tương ứng.
    • Thêm padding để tạo khoảng cách, và căn chỉnh các thành phần giao diện.
  2. Tách struct Creature:
    • Sửa tên struct result thành creature trong file Creatures.swift.
    • Tạo một file Swift mới tên Creature.swift và di chuyển struct creature vào đó để có thể truy cập từ nhiều view.
  3. Truyền dữ liệu từ CreatureListView sang DetailView:
    • Sửa CreatureListView để sử dụng NavigationLink và truyền creature được chọn sang DetailView.
    • Sửa DetailView để nhận creature và hiển thị tên Pokémon tương ứng.
    • Sửa PreviewProvider của DetailView để khởi tạo creature để preview không lỗi.
  4. Tạo class CreatureDetail:
    • Tạo một file Swift mới CreatureDetail.swift và copy nội dung từ Creatures.swift vào.
    • Sửa tên class thành CreatureDetail.
    • Thêm thuộc tính URLString để lưu URL của từng Pokémon.
    • Thêm các thuộc tính height, weight và imageURL để lưu thông tin chi tiết của Pokémon.
    • Tạo struct Sprite để decode JSON chứa URL hình ảnh.
    • Sửa hàm getData để decode JSON và lấy height, weight và imageURL.
  5. Sử dụng CreatureDetail trong DetailView:
    • Thêm state variable creatureDetail trong DetailView.
    • Gọi getData từ CreatureDetail khi DetailView xuất hiện bằng cách sử dụng modifier task.
    • Cập nhật URLString trong CreatureDetail bằng URL của Pokémon được chọn.
    • Hiển thị height và weight trong Text đã format thành chuỗi (ví dụ: 1.0).
    • Căn trái VStack chứa chiều cao và cân nặng.

<Chúc bạn có buổi học lập trình hiệu quả!>