[Video Summary] Ch. 8.3 Using the Keyboard to Move Between TextFields in SwiftUI, Snacktacular App (2024)

Mô tả nhanh

Video này hướng dẫn cách sử dụng nút submit trên bàn phím để di chuyển giữa các text field trong SwiftUI, đồng thời cải thiện giao diện người dùng và xác thực dữ liệu trong ứng dụng Snacktacular.

Video

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

Mô tả chi tiết

Video này hướng dẫn cách sử dụng nút submit trên bàn phím để di chuyển giữa các text field trong SwiftUI, đồng thời cải thiện giao diện người dùng và xác thực dữ liệu trong ứng dụng Snacktacular. Cụ thể, video này sẽ hướng dẫn bạn:

1. Tạo enum Ffield: Enum này chứa các case tương ứng với các text field (email, password) mà bạn muốn di chuyển qua lại.
2. Khai báo biến focusState: Sử dụng @FocusState để quản lý focus của các text field, focus cho biết text field nào đang được chọn và có con trỏ nhập liệu.
3. Sử dụng modifier .focused(): Gắn mỗi text field với một case cụ thể trong enum Ffield thông qua modifier .focused().
4. Sử dụng modifier .onSubmit(): Xác định hành động khi nhấn nút submit (next/done) trên bàn phím.
   • Khi nhấn "next" ở email field, focus được chuyển sang password field.
   • Khi nhấn "done" ở password field, bàn phím sẽ bị ẩn đi (focus = nil).
5. Bonus: Validation và UI:
   • Tạo biến @State buttonDisabled để kiểm soát trạng thái enable/disable của các nút.
   • Viết hàm enableButtons() để kiểm tra độ dài và định dạng của email/password, từ đó quyết định button enable/disable.
   • Sử dụng modifier .onchange() để gọi enableButtons() mỗi khi giá trị email/password thay đổi (có ký tự được nhập vào).

Các bước thực hiện chi tiết:

1. Tạo enum Ffield:

   enum Ffield {
       case email, password
   }
   

2. Khai báo biến @FocusState:

   @FocusState private var focusField: Ffield?
   

3. Sử dụng modifier .focused():

   TextField("Email", text: $email)
       .focused($focusField, equals: .email)
   
   SecureField("Password", text: $password)
       .focused($focusField, equals: .password)
   

4. Sử dụng modifier .onSubmit():

   TextField("Email", text: $email)
       .focused($focusField, equals: .email)
       .onSubmit {
           focusField = .password
       }
   
   SecureField("Password", text: $password)
       .focused($focusField, equals: .password)
       .onSubmit {
           focusField = nil
       }
   

5. Bonus: Validation và UI:
   • Tạo biến @State:

     @State private var buttonDisabled = true
     

   • Thêm modifier .disabled() cho button:

     HStack {
         Button("Register") {
             register()
         }
         Button("Login") {
             login()
         }
     }
     .disabled(buttonDisabled)
     
     

   • Viết hàm enableButtons():

     func enableButtons() {
          let emailIsGood = email.count >= 6 && email.contains("@")
          let passwordIsGood = password.count >= 6
          buttonDisabled = !(emailIsGood && passwordIsGood)
      }
     

   • Thêm modifier .onChange():

   TextField("Email", text: $email)
       .focused($focusField, equals: .email)
       .onSubmit {
            focusField = .password
        }
       .onChange(of: email) { _ in
           enableButtons()
       }
   
   SecureField("Password", text: $password)
       .focused($focusField, equals: .password)
       .onSubmit {
           focusField = nil
       }
       .onChange(of: password) { _ in
           enableButtons()
       }
   

Chúc bạn có những trải nghiệm thú vị với Swift và SwiftUI!