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

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!