[Video Summary] Ch 1.21 SwiftUI Two Way Bindings for @State using $ (You Are Awesome app)

Mô tả nhanh

Video này trình bày về two-way binding trong SwiftUI bằng cách sử dụng ký tự $ trước các biến @State. Chúng ta sẽ thực hành khái niệm này qua việc sử dụng các control như TextField, Toggle, ColorPicker, DatePicker và Stepper.

Video

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

Mô tả chi tiết

Video này trình bày về two-way binding trong SwiftUI bằng cách sử dụng ký tự $ trước các biến @State. Chúng ta sẽ thực hành khái niệm này qua việc sử dụng các control như TextField, Toggle, ColorPicker, DatePicker và Stepper.

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

1. Tạo Project Mới:
   • Tạo một project Xcode mới tên là "Two-Way Bindings".
   • Giao diện ban đầu gồm một VStack chứa Text và Image.
2. Thêm Button Counter:
   • Xóa Image.
   • Tạo biến @State private var pressCount = 0 để đếm số lần nhấn nút.
   • Hiển thị pressCount trong Text view.
   • Tạo Button để tăng pressCount mỗi khi nhấn (sử dụng action pressCount += 1).
   • Thay đổi style và font cho Button.
3. Giải thích về @State:
   • Các biến trong struct sẽ bị hủy khi view vẽ lại, nhưng @State lưu biến ở một vùng nhớ đặc biệt.
   • Khi một biến @State thay đổi, view sẽ được vẽ lại với giá trị mới.
   • @State là một property wrapper, và khi sử dụng, ta có thể đọc hoặc viết biến bằng cách gọi trực tiếp tên biến đó.
4. Two-Way Binding:
   • Một số view vừa đọc vừa ghi vào biến (ví dụ: các control).
   • Sử dụng $ trước tên biến khi cần two-way binding.
   • Xcode sẽ gợi ý và tự sửa lỗi nếu bạn quên $ khi cần thiết cho binding parameter.
5. Sử dụng Toggle:
   • Thêm Toggle component.
   • Tạo biến @State private var toggleIsOn = true để lưu trạng thái của toggle.
   • Sử dụng $toggleIsOn cho parameter isOn trong Toggle để tạo two-way binding (đọc và ghi).
   • Hiển thị text 'on'/'off' bên cạnh toggle dựa vào trạng thái của biến toggleIsOn
   • Thêm padding cho VStack.
6. Sử dụng TextField:
   • Thêm Spacer để khoảng cách các view.
   • Thêm TextField, placeholder là "Enter a name".
   • Tạo biến @State private var name = "" để lưu giá trị nhập vào.
   • Sử dụng $name cho parameter text của TextField.
   • Hiển thị nội dung name vừa nhập bằng Text view.
   • Thêm modifier textFieldStyle(.roundedBorder) cho TextField.
7. Sử dụng ColorPicker:
   • Thêm Spacer.
   • Thêm ColorPicker với title "Pick a color".
   • Tạo biến @State private var selectedColor: Color = .red.
   • Sử dụng $selectedColor cho parameter selection của ColorPicker.
   • Thêm một Rectangle bên trên, fill màu bởi selectedColor và thiết lập kích thước.
   • Sử dụng Group để nhóm nhiều view lại để tránh lỗi quá 10 subview.
8. Sử dụng DatePicker:
   • Thêm Spacer.
   • Thêm DatePicker với title "Date:"
   • Tạo biến @State private var selectedDate: Date = Date() để lưu giá trị ngày tháng
   • Sử dụng $selectedDate cho parameter selection của DatePicker.
   • Thêm Text view để hiển thị giá trị của selectedDate.
   • Sử dụng dot formatted để format lại ngày tháng hiển thị.
9. Sử dụng Stepper:
   • Thêm Spacer.
   • Thêm Stepper với title "Stepper Value: [giá trị]" và range từ 1 đến 10.
   • Tạo biến @State private var stepperValue = 1.
   • Sử dụng $stepperValue cho parameter value của Stepper.

Chúc bạn có một buổi học hiệu quả!