MakeXYZ Fun

[Video Summary] Ch. 1 SwiftUI Fundamentals: Two Way Bindings for @State using $ (2025)

Admin -

Mô tả nhanh

Video này hướng dẫn về two-way binding (ràng buộc hai chiều) trong SwiftUI, sử dụng ký tự $ trước các biến @State. Video còn trình bày cách sử dụng các control như TextField, Toggle, ColorPicker, DatePicker và Stepper, những control đòi hỏi two-way binding.

Video

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

Mô tả chi tiết

Video này hướng dẫn về two-way binding (ràng buộc hai chiều) trong SwiftUI, sử dụng ký tự $ trước các biến @State. Video còn trình bày cách sử dụng các control như TextField, Toggle, ColorPicker, DatePicker và Stepper, những control đòi hỏi two-way binding.

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

  1. Tạo Project và UI ban đầu:
    • Tạo project mới "two-way bindings"
    • Xây dựng giao diện đơn giản với một Text hiển thị số lần bấm nút, một Button để tăng số đếm.
    • Sử dụng State để lưu trữ số lần bấm.
    • Chú ý sử dụng modifier để style button và font chữ giống như trong video mẫu.
  2. Giải thích về State và Struct:
    • Giải thích lý do sử dụng @State để lưu trữ giá trị biến khi view được vẽ lại.
    • Giới thiệu về tính bất biến của struct và tại sao không thể thay đổi thuộc tính trực tiếp bên trong struct.
    • @State là một property wrapper, cho phép đọc và ghi biến.
  3. Two-way binding:
    • Giới thiệu concept two-way binding.
    • Một số view (control) vừa đọc vừa ghi biến, cần dùng $ để tạo binding.
    • Xcode sẽ báo lỗi nếu quên $ và gợi ý sửa.
  4. Sử dụng Toggle:
    • Thêm Toggle vào giao diện.
    • Tạo biến @State kiểu Bool để quản lý trạng thái toggle.
    • Sử dụng $ trước biến trong toggle để tạo binding.
    • Hiển thị trạng thái toggle (on/off) bằng một Text.
  5. Sử dụng TextField:
    • Thêm TextField để nhập text.
    • Tạo biến @State kiểu String để lưu trữ input.
    • Sử dụng $ trong text field để tạo binding.
    • Hiển thị nội dung đang nhập ở một Text khác, không cần $ vì chỉ đọc giá trị.
    • Sử dụng modifier textFieldStyle(.roundedBorder)
  6. Sử dụng ColorPicker:
    • Thêm ColorPicker để chọn màu.
    • Tạo biến @State kiểu Color để lưu màu đã chọn.
    • Sử dụng $ để tạo binding.
    • Tạo thêm một view hình chữ nhật, fill màu theo màu đã chọn.
  7. Sử dụng DatePicker:
    • Thêm DatePicker để chọn ngày giờ.
    • Tạo biến @State kiểu Date để lưu ngày giờ đã chọn.
    • Sử dụng $ để tạo binding.
    • Hiển thị ngày giờ đã chọn bằng Text sử dụng .formatted để custom format ngày giờ
  8. Sử dụng Stepper:
    • Thêm Stepper để tăng giảm giá trị.
    • Tạo biến @State kiểu Int để lưu trữ giá trị stepper.
    • Sử dụng $ để tạo binding.
    • Đặt range cho stepper từ 1 đến 10.
    • Hiển thị giá trị của stepper trong Text.

<Lời chúc>
Chúc bạn học tập hiệu quả và tiếp tục khám phá thế giới lập trình Swift và SwiftUI!