[Video Summary] Ch. 2.3 Working with TextFields in SwiftUI (WordGarden app)

Mô tả nhanh

Video này hướng dẫn cách làm việc với TextField trong SwiftUI, bao gồm kiểm soát bàn phím, thay đổi bố cục bàn phím, tắt tự động sửa lỗi, hạn chế nhập liệu, buộc viết hoa, chặn các lần nhấn phím, vô hiệu hóa hoặc kích hoạt các phần tử giao diện người dùng dựa trên giá trị trong text field và tìm hiểu về focus state property wrapper.

Video

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

Mô tả chi tiết

Video này hướng dẫn cách làm việc với TextField trong SwiftUI, bao gồm kiểm soát bàn phím, thay đổi bố cục bàn phím, tắt tự động sửa lỗi, hạn chế nhập liệu, buộc viết hoa, chặn các lần nhấn phím, vô hiệu hóa hoặc kích hoạt các phần tử giao diện người dùng dựa trên giá trị trong text field và tìm hiểu về focus state property wrapper.

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

1. Loại bỏ code liên quan đến nút "Play Again":
   • Xóa code ẩn/hiện text field và nút "Guess a Letter" từ các nút "Guess a Letter" và "Another Word". Code này sẽ được thêm lại sau khi hoàn thành game.
2. Kiểm tra các vấn đề với bàn phím ảo:
   • Bàn phím hiện emoji, cần loại bỏ.
   • Chữ cái đầu tiên tự động viết hoa, cần viết hoa tất cả.
   • Tính năng tự động sửa lỗi gây vấn đề.
3. Loại bỏ emoji và tắt tự động sửa lỗi:
   • Sử dụng modifier .keyboardType(.asciiCapable) để loại bỏ emoji.
   • Sử dụng modifier .autocorrectionDisabled() để tắt tự động sửa lỗi.
4. Sử dụng auto capitalization:
   • Sử dụng modifier .textInputAutocapitalization(.characters) để luôn bật shift key.
   • Tuy nhiên, người dùng vẫn có thể tắt shift key nên cần thêm các bước để xử lý.
5. Chặn các ký tự không mong muốn và ép viết hoa:
   • Sử dụng modifier .onChange(of: guestLetter) để chặn các ký tự nhập vào.
   • Dùng .trimmingCharacters(in: .letters.inverted) để lọc hết ký tự không phải là chữ cái.
   • Lấy chữ cái cuối cùng bằng guestLetter.last và chuyển thành string.
   • Ép viết hoa bằng .uppercased().
6. Vô hiệu hóa nút "Guess a Letter" khi không có chữ cái:
   • Sử dụng modifier .disabled(guestLetter.isEmpty) cho nút "Guess a Letter".
7. Thay đổi nhãn nút "Return" trên bàn phím:
   • Sử dụng modifier .submitLabel(.done) để thay đổi nút return thành "Done".
8. Ẩn bàn phím khi nhấn nút "Guess a Letter":
   • Khai báo @FocusState private var textFieldIsFocused: Bool để theo dõi trạng thái focus của text field.
   • Gán text field với trạng thái focus bằng modifier .focused($textFieldIsFocused).
   • Trong action của nút "Guess a Letter", đặt textFieldIsFocused = false để ẩn bàn phím.

Chúc bạn học tập hiệu quả!