MakeXYZ Fun

[Video Summary] Ch. 5.3: Sheets, Lists, and Building the To Do List User Interface

Admin -

Mô tả nhanh

Video này hướng dẫn cách xây dựng giao diện người dùng (UI) cho ứng dụng To Do List, tập trung vào việc sử dụng Toolbars, Sheets, và Full Screen Covers trong SwiftUI.

Video

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

Mô tả chi tiết

Video này hướng dẫn cách xây dựng giao diện người dùng (UI) cho ứng dụng To Do List, tập trung vào việc sử dụng Toolbars, Sheets, và Full Screen Covers trong SwiftUI.

  • Tùy chỉnh giao diện danh sách (List View):
    • Tăng kích thước font chữ của các mục trong danh sách bằng modifier .font(.title2).
    • Tạo giao diện chi tiết (Detail View) mới để hiển thị thông tin chi tiết cho từng mục.
  • Xây dựng giao diện chi tiết (Detail View):
    • Sử dụng List để tổ chức các thành phần giao diện.
    • Thêm TextField để nhập nội dung công việc, sử dụng @State để quản lý giá trị nhập liệu (cần có biến @State để lưu trữ giá trị nhập của field này, khác với Text view chỉ dùng để hiển thị).
      • Biến @State không để private để có thể truy cập từ file khác.
    • Thêm các modifier để cải thiện giao diện như .font(.title) và .textFieldStyle(.roundedBorder).
    • Sử dụng .listStyle(.plain) để loại bỏ viền và nền xám mặc định của list.
    • Thêm Toggle để bật/tắt reminder và @State private var tương ứng.
    • Thêm DatePicker để chọn ngày, giờ và @State private var cho ngày giờ.
      • Có thể dùng calendar.current.date(byAdding: .day, value: 1, to: Date.now) để thêm 1 ngày từ ngày hiện tại.
      • Dùng modifier .disabled kết hợp với giá trị biến của toggle set reminder để ẩn/hiện date picker.
    • Thêm Text label "Notes", TextField để nhập note và @State private var cho note.
      • Modifier .axis(.vertical) cho phép textfield cao lên khi vượt quá số dòng hiển thị.
    • Thêm Toggle để đánh dấu hoàn thành và @State private var tương ứng.
    • Thêm modifier .padding(.vertical) vào TextField và .padding(.top) cho Toggle để có khoảng cách giữa các thành phần.
    • Sử dụng .listRowSeparator(.hidden) để ẩn đường kẻ phân tách giữa các row của list view.
  • Thêm Toolbar:
    • Thêm modifier .toolbar vào List view, nhớ trong NavigationStack để có toolbar.
    • Bên trong .toolbar, thêm ToolbarItem và Button với title "Cancel" (bên trái).
    • Thêm ToolbarItem và Button thứ 2 với title "Save" (bên phải).
    • Sử dụng biến môi trường @Environment(\.dismiss) cho button cancel để đóng màn hình.
    • Nhúng DetailView trong NavigationView ở phần preview để hiển thị toolbar.
    • Dùng modifier .navigationBarBackButtonHidden(true) ở list view để ẩn nút back mặc định.
  • Thêm nút "+" để tạo mới to-do:
    • Thêm ToolbarItem với Button vào TodoList view để tạo nút "+".
    • Dùng Image(systemName: "plus") để tạo hình icon.
  • Sử dụng Sheet và Full Screen Cover:
    • Để view mới xuất hiện dạng sheet nhỏ và trượt lên từ dưới, dùng modifier .sheet(isPresented: $sheetIsPresented) { DetailView(toDo: "") } bên trong NavigationStack của ListView.
    • Thay vì sử dụng NavigationLink, dùng modifier .sheet để hiện view mới.
    • Để view mới full màn hình hoặc không cần phần navigation bar, thay thế bằng .fullScreenCover(isPresented: $sheetIsPresented) { DetailView(toDo: "") }
    • Chú ý nhúng DetailView trong NavigationView ở phần closure sheet hoặc fullScreenCover để hiển thị toolbar.
    • Khi bấm nút "+", toggle giá trị biến sheetIsPresented để gọi tới việc show sheet hoặc fullScreenCover.

Video cũng đề cập đến việc sử dụng biến @State để giữ dữ liệu và cách truyền dữ liệu giữa các view khác nhau. Ngoài ra, video cũng có một thử thách nhỏ để người xem thực hành.

<Lời chúc>
Mong rằng bạn sẽ áp dụng thành công các kiến thức trong video này vào dự án của mình. Chúc bạn luôn học tập hiệu quả và có những sản phẩm chất lượng!