MakeXYZ Fun

[Video Summary] Ch. 5.8 Interactive @Query in SwiftData - Change @Query Properties with a Picker ToDo List App

Admin -

Mô tả nhanh

Video này hướng dẫn cách sử dụng Picker để thay đổi thuộc tính @Query trong SwiftData, giúp tải lại dữ liệu đã được sắp xếp, đặt hàng hoặc lọc theo lựa chọn của người dùng.

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 Picker để thay đổi thuộc tính @Query trong SwiftData, giúp tải lại dữ liệu đã được sắp xếp, đặt hàng hoặc lọc theo lựa chọn của người dùng.

Để thực hiện điều này, bạn sẽ làm theo các bước sau:

  1. Tạo một enum để xác định các tùy chọn sắp xếp:

    • Tạo một enum SortOption với các trường hợp (case) như asEntered, alphabetical, chronological, và completed.
    • Enum này tuân thủ String để có thể gán giá trị chuỗi cho từng trường hợp và CaseIterable để lặp qua tất cả các trường hợp.

  2. Thêm biến trạng thái cho Picker:

    • Trong ToDoListView, thêm biến trạng thái @State private var sortSelection kiểu SortOption để lưu trữ lựa chọn từ Picker.
    • Khởi tạo biến với giá trị mặc định là .asEntered.

  3. Thêm Picker vào toolbar:

    • Sử dụng ToolbarItem với vị trí .bottomBar để thêm Picker vào phía dưới màn hình.
    • Sử dụng Picker với title rỗng, selection là $sortSelection và nội dung là một vòng lặp ForEach qua tất cả các trường hợp của SortOption.
    • Sử dụng .pickerStyle(.segmented) để hiển thị Picker dưới dạng segmented control.

  4. Tách List và ForEach ra một View mới:

    • Tạo một struct mới gọi là SortedToDoList tuân thủ View.
    • Di chuyển phần code List và ForEach từ ToDoListView vào SortedToDoList.
    • Di chuyển cả khai báo @Query và @Environment vào struct này.
    • Thêm một biến let sortSelection: SortOption vào SortedToDoList để nhận giá trị lựa chọn sắp xếp từ ToDoListView.

  5. Truyền sortSelection vào SortedToDoList:

    • Trong ToDoListView, thay thế phần code List bằng SortedToDoList, và truyền biến trạng thái sortSelection vào view này qua parameter.

  6. Thêm initializer cho SortedToDoList:

    • Thêm một init vào SortedToDoList để khởi tạo thuộc tính @Query dựa trên sortSelection.
    • Sử dụng switch để chọn cách khởi tạo @Query khác nhau dựa trên giá trị của sortSelection:
      • asEntered: Không sắp xếp (mặc định của Query).
      • alphabetical: Sắp xếp theo tên mục (item).
      • chronological: Sắp xếp theo ngày (date).
      • completed: Lọc chỉ hiển thị các ToDo chưa hoàn thành.
    • Sử dụng _toDos để truy cập và khởi tạo @Query trong init. Với _toDos, ta hoàn toàn có thể set lại query với các giá trị khác nhau.
    • Sử dụng macro #Predicate để lọc các toDo chưa hoàn thành.

  7. Chú ý:

    • Mỗi khi giá trị sortSelection thay đổi (do người dùng chọn trên Picker), SortedToDoList sẽ bị hủy và tạo lại với initializer mới, từ đó query cũng được tạo mới.
    • Mặc dù animation được cung cấp trong initializer nhưng trong query thì effect này chưa được implement.

  8. Thử nghiệm: Chạy ứng dụng trên simulator để xem kết quả. Dữ liệu được sắp xếp và lọc dựa trên lựa chọn của người dùng và được lưu lại trong simulator.

  9. Lưu ý thêm:

    • Mỗi simulator (không chỉ là device mà còn cả version OS) đều lưu trữ dữ liệu riêng biệt. Do đó, dữ liệu giữa các simulator là không đồng bộ.
    • Để xoá toàn bộ data của app trên simulator, chỉ cần long-press icon app và chọn xoá ứng dụng. Khi chạy lại, app sẽ tạo dữ liệu mới hoàn toàn.

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