[Video Summary] Ch. 2.6 onChange and onSubmit in SwiftUI to Guess a Letter - WordGarden App (2025)

Mô tả nhanh

Video này hướng dẫn cách tích hợp công việc từ bài học trước vào ứng dụng Word Garden, sử dụng các modifier onChange và onSubmit trong SwiftUI để đoán chữ cái. Video cũng giới thiệu cách khởi tạo và cập nhật giao diện người dùng khi ứng dụng khởi chạy.

Video

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

Mô tả chi tiết

Video này trình bày cách tích hợp công việc từ bài học trước vào ứng dụng Word Garden và sử dụng các modifier onChange và onSubmit.

Dưới đây là các bước chi tiết được thực hiện trong video:

1. Khởi tạo biến và mảng:

   • Thay đổi current word thành current word index để rõ ràng hơn về mục đích sử dụng (chứa index của từ hiện tại).
   • Khai báo wordToGuess là một state variable để lưu trữ từ cần đoán. Ban đầu, nó được khởi tạo là một chuỗi rỗng.
   • Khai báo wordsToGuess là một constant để lưu trữ danh sách các từ có thể đoán.
   • Khai báo revealedWord là một state variable để lưu trữ từ đã đoán được (ban đầu là các dấu gạch dưới).
   • Khai báo lettersGuessed là một state variable để lưu trữ các chữ cái đã đoán.

2. Sử dụng onAppear modifier:

   • Sử dụng .onAppear modifier trên VStack để thực thi code khi view xuất hiện.
   • Trong closure của .onAppear, đặt wordToGuess bằng từ đầu tiên trong mảng wordsToGuess sử dụng currentWordIndex.
   • Khởi tạo revealedWord bằng cách tạo một chuỗi chứa các dấu gạch dưới, mỗi dấu gạch dưới đại diện cho một chữ cái trong wordToGuess.
   • Code này lấy từ playground trước đó để tạo revealedWord.

3. Xử lý sự kiện "Guess a Letter" Button:

   • Thêm chữ cái đã đoán (guestLetter) vào lettersGuessed.
   • Cập nhật revealedWord để hiển thị các chữ cái đã đoán đúng.
   • Đặt guestLetter thành một chuỗi rỗng để xóa nội dung của text field.
   • Đặt isTextFieldFocused thành false

4. Sử dụng onSubmit modifier:

   • Thêm .onSubmit modifier vào text field để thực thi code khi người dùng nhấn phím "done" trên bàn phím.
   • Sử dụng guard để đảm bảo rằng chỉ khi guestLetter không rỗng thì code mới được thực thi (ngăn chặn việc xử lý khi người dùng nhấn "done" mà không nhập gì).
   • Tạo hàm guessALetter để chứa code xử lý việc đoán chữ cái, và sau đó gọi hàm này từ cả button action và onSubmit modifier để tránh lặp code.

Video kết thúc bằng việc thử nghiệm ứng dụng và xác nhận rằng mọi thứ hoạt động như mong đợi.

Chúc bạn thành công!