MakeXYZ Fun

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

Admin -

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ả!