MakeXYZ Fun

[Video Summary] Ch. 6.7 Simple Circular Progress View in SwiftUI (2024)

Admin -

Mô tả nhanh

Video này hướng dẫn cách sử dụng và tùy chỉnh ProgressView cơ bản trong SwiftUI, bao gồm cách thay đổi màu sắc, kích thước và điều khiển hiển thị của nó. Video cũng trình bày cách tích hợp nó vào một ứng dụng thực tế để hiển thị trạng thái tải dữ liệu.

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 ProgressView trong SwiftUI để hiển thị tiến trình tải dữ liệu. Đầu tiên, video tạo một ứng dụng nhỏ để thử nghiệm và tùy chỉnh ProgressView, sau đó tích hợp nó vào ứng dụng "Catch them all" để hiển thị khi dữ liệu đang được tải.

Các bước thực hiện chính:

  1. Tạo dự án thử nghiệm:

    • Tạo một project SwiftUI mới có tên "progressView".
    • Xóa nội dung mặc định trong VStack.
    • Thêm ProgressView(), đây là một spinner cơ bản màu xám.
    • Sử dụng .tint(.red) để thay đổi màu spinner thành đỏ.
    • Sử dụng .scaleEffect(4) để tăng kích thước spinner lên gấp 4 lần.

  2. Điều khiển hiển thị ProgressView:

    • Tạo một biến trạng thái @State private var showProgressView = false để kiểm soát việc hiển thị ProgressView.
    • Thêm một Button để toggle giá trị của showProgressView.
    • Sử dụng if showProgressView { ... } để hiển thị ProgressView chỉ khi showProgressView là true.

  3. Tích hợp vào ứng dụng "Catch them all":

    • Sử dụng ZStack để hiển thị ProgressView ở trên cùng của List.
    • Thêm ProgressView() sau List trong ZStack.
    • Tùy chỉnh màu sắc và kích thước của ProgressView.
    • Thêm biến isLoading kiểu Bool vào class Creatures để theo dõi trạng thái tải dữ liệu (false khi không tải, true khi đang tải).
    • Trong hàm getData() của Creatures:
      • Set isLoading thành true khi bắt đầu tải dữ liệu.
        • Set isLoading thành false khi tải thành công hoặc khi có lỗi.
    • Trong CreaturesListView, bọc ProgressView trong một if statement, chỉ hiển thị khi creatures.isLoading là true.

Kết quả là ProgressView sẽ chỉ hiển thị khi ứng dụng đang tải dữ liệu, và sẽ ẩn đi khi quá trình tải hoàn tất hoặc có lỗi xảy ra.

Chúc bạn có thêm một kỹ năng hữu ích với SwiftUI!