[Video Summary] Ch. 5.6 Deleting and Updating Checkmarks with SwiftData (Updated!)

SwiftUI 6 Th02 2025

Mô tả nhanh

Video này hướng dẫn cách thêm chức năng xóa bằng thao tác vuốt (swipe to delete) và cập nhật trạng thái hoàn thành (toggle) cho các mục trong danh sách "to-do" sử dụng SwiftData trong ứng dụng iOS/macOS.

Video

Click vào hình dưới để mở:
Ch. 5.6 Deleting and Updating Checkmarks with SwiftData (Updated!)

Mô tả chi tiết

Video này hướng dẫn cách thêm chức năng xóa bằng thao tác vuốt (swipe to delete) và cập nhật trạng thái hoàn thành (toggle) cho các mục trong danh sách "to-do" sử dụng SwiftData trong ứng dụng iOS/macOS.

  • Thêm Icon ứng dụng và màn hình chờ:
    • Tải xuống hình ảnh từ link được cung cấp và thêm vào Asset Catalog trong Xcode.
    • Cấu hình hình ảnh làm màn hình chờ (Launch Screen) bằng cách thêm tên ảnh vào Info.plist.
  • Thêm chức năng Swipe to Delete:
    • Sử dụng modifier .swipeActions trên mỗi item của ForEach để thêm button "Delete" khi vuốt.
    • Thêm modelContext.delete(toDoItem) vào action của button để xóa item tương ứng.
    • Thêm guard let _ = try? modelContext.save() else { ... } để đảm bảo dữ liệu được lưu lại, tránh mất dữ liệu khi tắt app đột ngột (trên simulator).
  • Cách khác để thực hiện chức năng delete: .onDelete modifier
    • Sử dụng modifier .onDelete trực tiếp trên ForEach.
    • Với indexSet, dùng indexSet.forEach và trong closure gọi modelContext.delete(toDos[index]) để xóa item tương ứng.
    • Thêm guard let _ = try? modelContext.save() else { ... } tương tự như trên.
  • Thêm Checkbox và chức năng toggle:
    • Nhúng NavigationLink vào HStack để có thể thêm checkbox ở bên trái.
    • Sử dụng Image(systemName:) với toán tử ternary để hiển thị checkbox hoặc hình chữ nhật dựa trên trạng thái isCompleted của ToDo.
      • toDo.isCompleted ? "checkmark.rectangle" : "rectangle"
    • Thêm modifier .onTapGesture vào Image để cập nhật trạng thái isCompleted của ToDo khi click.
      • toDo.isCompleted.toggle()
      • Thêm guard let _ = try? modelContext.save() else { ... } để lưu cập nhật.
  • Kiểm tra:
    • Thử vuốt để xóa và click vào checkbox để thay đổi trạng thái "completed".
    • Đóng và mở lại ứng dụng để kiểm tra xem dữ liệu đã được lưu lại một cách chính xác hay chưa.

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

Tags