전문가처럼 떨림 입력 폼을 만들고 처리합니다

입력 폼은 소프트웨어 응용 프로그램에서 사용자로부터 데이터를 수집하는 데 사용되며, 이것은 모든 응용 프로그램의 사용자 인터페이스를 구성하는 불가결하거나 부족한 구성 요소이다.우리는 그것들이 다음과 같은 장면에서 관건적인 역할을 발휘하는 것을 보았다.사용자 등록과 로그인, 실시간 메시지 응용 프로그램에서 메시지를 보내고 전자상거래 응용 프로그램에서 주문서를 보는 등등.즉, 입력 폼을 쉽게 접근하고 사용자의 내비게이션을 편리하게 하는 것이 중요하다.
본고의 목적은 TextFormField 작은 위젯을 사용하여 떨림 폼을 만들고 처리하여 더욱 좋은 사용자 체험을 얻는 방법을 보여주는 것이다.본고에서 소개할 내용은 다음과 같다.

떨림형태와 TextFormField류가 무엇인지 설명한다.

TextFormField 작은 위젯의 일부 속성을 사용하여 하나의 TextFormField에서 다른 TextFormField로의 쉬운 내비게이션을 실현하는 방법을 토론하고 전시한다.

폼과 TextFormField 작은 위젯의 속성을 기본 폼 필드 검증에 어떻게 사용하는지 토론하고 보여 줍니다.

주의: 본고는 떨림의 기본 지식을 갖춘 독자(즉, 안드로이드나 iOS 장치에서 떨림 응용 프로그램을 만들고 실행할 수 있으며, 떨림에 사용되는 작은 부품(유상태와 무상태)을 이해할 수 있는 독자)를 대상으로 한다.
떨림 폼 클래스는 작은 위젯으로 폼 필드를 포장/조립하여 쉽게 저장하거나 리셋하거나 검증할 수 있습니다.한편, TextFormField 클래스는 TextField 소부품을 FormField 소부품에 포장하는 소부품이다.
폼과 TextFormField 작은 위젯, 그리고 그것들의 일부 속성이 한 입력 필드에서 다른 입력 필드로 쉽게 내비게이션하고 폼 검증을 하는 데 어떻게 사용되는지 깊이 있게 알아보겠습니다.사용자 등록표에는 사용자 이름, 전화, 이메일, 비밀번호를 포착하는 데 사용되는 네 개의 입력 필드가 포함되어 있으며, 사례 연구로 사용될 것이다.
이 때, 선택한 유효한 이름으로 떨림 항목을 만들어야 합니다.

단계 1: 폼 상태를 저장하는 전역 키를 포함하는 폼 위젯의 실례를 만듭니다.

final _formKey = GlobalKey<FormState>();

Form(
  key: _formKey,
  child: null,
)

이름_formKey으로 표시된 개인 변수는 폼 상태를 저장하는 전역 키로 설정되어 있으며 키로 폼의 작은 위젯에 전달됩니다.이 키는 창의 모든 하위 입력 필드를 검증할 수 있도록 합니다.

2단계: 위의 양식에 기본 속성이 있는 TextFormField 위젯 네 개를 추가합니다.

final _formKey = GlobalKey<FormState>();

Form(
  key: _formKey,
-  child: null,
+  child: Column(
+    children: <Widget>[
+      TextFormField(
+        keyboardType: TextInputType.name,
+        textInputAction: TextInputAction.next,
+        decoration: InputDecoration(
+          hintText: 'Enter your full name',
+          labelText: 'Full Name',
+        ),
+      ),
+      TextFormField(
+        keyboardType: TextInputType.phone,
+        textInputAction: TextInputAction.next,
+        decoration: InputDecoration(
+          hintText: 'Enter your phone number',
+          labelText: 'Phone Number',
+        ),
+      ),
+      TextFormField(
+        keyboardType: TextInputType.emailAddress,
+        textInputAction: TextInputAction.next,
+        decoration: InputDecoration(
+          hintText: 'Enter your email address',
+          labelText: 'Email Address',
+        ),
+      ),
+      TextFormField(
+        keyboardType: TextInputType.text,
+        textInputAction: TextInputAction.done,
+        obscureText: true,
+        decoration: InputDecoration(
+          hintText: 'Enter your password',
+          labelText: 'Password',
+        ),
+      ),
+    ],
+  ),
)

네 개의 TextFormFields 작은 위젯은 사용자 이름, 전화번호, 이메일 주소, 비밀번호를 포착하는 데 사용됩니다.TextFormField 작은 위젯에 전달되는 속성에 대해 토론합시다.keyboardType: 텍스트 필드에 초점을 맞출 때 나오는 소프트 키보드 유형으로 적당한 텍스트 입력 유형 값을 이 속성에 전달하면 더욱 좋은 사용자 체험을 할 수 있습니다.예를 들어 TextInputType.emailAddress를 전자 우편 주소인 TextFormField 작은 위젯에 전달하는 keyboardType 속성은 텍스트 필드에 초점을 맞출 때 @와 . 문자가 있는 전자 우편 주소를 입력하는 키보드를 표시합니다.textInputAction: 이 값은 키보드 동작 키로 표시되는 아이콘을 결정합니다.TextInputAction.next로 설정한 경우;next 아이콘이 작업 키로 표시됩니다.다음 단계에서, 우리는 이것이 한 텍스트 필드에서 다른 텍스트 필드로 내비게이션하는 데 얼마나 직관적이고 묘사적인지 보게 될 것이다.obscureText: 사용자가 텍스트 필드에서 제공한 데이터가 가려졌는지 확인하기 위해 부울 값 (기본값 false 을 사용합니다.true 로 설정하면 데이터가 숨겨집니다. 이것은 비밀번호 TextFormField 작은 위젯에 적용됩니다.decoration: InputDecoration 클래스의 예를 값으로 하고 이 클래스의 속성은 텍스트 필드의 수식 방식을 설명합니다.여기에는 두 개의 속성만 사용 중입니다.

hintText: 텍스트 필드가 비어 있을 때 표시되는 자리 표시자 텍스트 및

labelText: 텍스트 필드에 포커스가 있거나 비어 있지 않을 때 표시되는 설명 태그 텍스트입니다.

3단계: 키보드의 조작키를 통해 폼을 내비게이션하고 제출할 수 있도록 한다.

final _formKey = GlobalKey<FormState>();
+
+ final FocusNode _nameFocusNode = FocusNode();
+ final FocusNode _phoneFocusNode = FocusNode();
+ final FocusNode _emailFocusNode = FocusNode();
+ final FocusNode _passwordFocusNode = FocusNode();
+
+ _nextFocus(FocusNode focusNode) {
+   FocusScope.of(context).requestFocus(focusNode);
+ }
+
+ _submitForm() {
+   Scaffold.of(context).showSnackBar(SnackBar(content: 
+   Text('Registration sent')));
+ }

Form(
  key: _formKey,
  child: Column(
    children: <Widget>[
      TextFormField(
         keyboardType: TextInputType.name,
         textInputAction: TextInputAction.next,
+        focusNode: _nameFocusNode,
+        onFieldSubmitted: (String value) {
+          //Do anything with value
+          _nextFocus(_phoneFocusNode);
+        },
         decoration: InputDecoration(
           hintText: 'Enter your full name',
           labelText: 'Full Name',
         ),
      ),
      TextFormField(
         keyboardType: TextInputType.phone,
         textInputAction: TextInputAction.next,
+        focusNode: _phoneFocusNode,
+        onFieldSubmitted: (String value) {
+          //Do anything with value
+          _nextFocus(_emailFocusNode);
+        },
         decoration: InputDecoration(
           hintText: 'Enter your phone number',
           labelText: 'Phone Number',
         ),
      ),
      TextFormField(
         keyboardType: TextInputType.emailAddress,
         textInputAction: TextInputAction.next,
+        focusNode: _emailFocusNode,
+        onFieldSubmitted: (String value) {
+          //Do anything with value
+          _nextFocus(_passwordFocusNode);
+        },
         decoration: InputDecoration(
           hintText: 'Enter your email address',
           labelText: 'Email Address',
         ),
      ),
      TextFormField(
         keyboardType: TextInputType.text,
         textInputAction: TextInputAction.done,
         obscureText: true,
+        focusNode: _passwordFocusNode,
+        onFieldSubmitted: (String value) {
+          //Do anything with value
+          _submitForm();
+        },
         decoration: InputDecoration(
           hintText: 'Enter your password',
           labelText: 'Password',
         ),
      ),
    ],
  ),
)

focusNode에서 모든 TextFormField 작은 위젯의 Form 속성은FocusNode 대상에 분배되어 폼이 한 입력 필드에서 다른 입력 필드로 쉽게 이동할 수 있도록 한다.여기서 FocusNode 객체는 키보드 포커스를 가져와 입력 필드 간에 전달할 수 있습니다.우리는 4개의FocusNode 대상(_nameFocusNode,_phoneFocusNode,_emailFocusNode과_passwordFocusNode가 각각 표의 4개의TextFormField 소부품에 대해 성명, 초기화하고 전달했다.
위 코드 업데이트는 함수 속성onFieldSubmitted을 TextFormField 위젯에 추가합니다.이 함수는 키보드 조작키를 눌렀을 때 호출되는 연결 입력 필드의 현재 값인 문자열 매개 변수를 받아들인다.name, phone 및 email 입력 필드의 경우 onFieldSubmitted 기능을 사용하여 사용자가 키를 클릭할 때 키보드 포커스를 다음 입력 필드로 전달합니다.따라서 그들의 textInputAction 속성은 TextInputAction.next로 설정하여 동작 키의 행동을 직관적으로 한다.onFieldSubmitted 함수 호출_nextFocus() 방법으로 다음 FocusNode 대상을 매개 변수로 키보드 초점을 다음 입력 필드에 전달한다._nextFocus() 수신된 FocusNode 객체에 키보드 포커스를 전달합니다.
비밀번호onFieldSubmitted 소부품의 TextFormField 속성 제출 폼에 따라 소부품의 textInputAction 속성은 동작 키의 행동을 설명하는 값TextInputAction.done을 가진다.onFieldSubmitted 함수 호출_submitForm() 방법, 이 방법은 화면에 메시지를 깜박거린다Registration sent._submitForm() 방법의 작용은 다음 단계에서 메시지를 반짝이는 데 그치지 않는다.


Android의 Next 및 Done 동작 키

4단계: 필드와 폼이 제출한 비공식 검증을 입력하십시오

final _formKey = GlobalKey<FormState>();

final FocusNode _nameFocusNode = FocusNode();
final FocusNode _phoneFocusNode = FocusNode();
final FocusNode _emailFocusNode = FocusNode();
final FocusNode _passwordFocusNode = FocusNode();
+
+ final TextEditingController _nameController = TextEditingController();
+ final TextEditingController _phoneController = TextEditingController();
+ final TextEditingController _emailController = TextEditingController();
+ final TextEditingController _passwordController = TextEditingController();

_nextFocus(FocusNode focusNode) {
  FocusScope.of(context).requestFocus(focusNode);
}

_submitForm() {
+  if (_formKey.currentState.validate()) {
+    final user = {
+      'name': _nameController.text,
+      'phone': _phoneController.text,
+      'email': _emailController.text,
+      'password': _passwordController.text,
+    };
+    print(user.toString());

     // If the form passes validation, display a Snackbar.
     Scaffold.of(context).showSnackBar(SnackBar(
       content:Text('Registration sent')));
+
+    _formKey.currentState.save();
+    _formKey.currentState.reset();
+    _nextFocus(_nameFocusNode);
+  }
}
+
+ String _validateInput(String value) {
+   if(value.trim().isEmpty) {
+     return 'Field required';
+   }
+   return null;
+ }

Form(
  key: _formKey,
  child: Column(
    children: <Widget>[
      TextFormField(
        keyboardType: TextInputType.name,
        textInputAction: TextInputAction.next,
        focusNode: _nameFocusNode,
        onFieldSubmitted: (String value) {
          //Do anything with value
          _nextFocus(_phoneFocusNode);
        },
+       controller: _nameController,
+       validator: _validateInput,
        decoration: InputDecoration(
          hintText: 'Enter your full name',
          labelText: 'Full Name',
        ),
      ),
      TextFormField(
        keyboardType: TextInputType.phone,
        textInputAction: TextInputAction.next,
        focusNode: _phoneFocusNode,
        onFieldSubmitted: (String value) {
          //Do anything with value
          _nextFocus(_emailFocusNode);
        },
+       controller: _phoneController,
+       validator: _validateInput,
        decoration: InputDecoration(
          hintText: 'Enter your phone number',
          labelText: 'Phone Number',
        ),
      ),
      TextFormField(
        keyboardType: TextInputType.emailAddress,
        textInputAction: TextInputAction.next,
        focusNode: _emailFocusNode,
        onFieldSubmitted: (String value) {
          //Do anything with value
          _nextFocus(_passwordFocusNode);
        },
+       controller: _emailController,
+       validator: _validateInput,
        decoration: InputDecoration(
          hintText: 'Enter your email address',
          labelText: 'Email Address',
        ),
      ),
      TextFormField(
        keyboardType: TextInputType.text,
        textInputAction: TextInputAction.done,
        obscureText: true,
        focusNode: _passwordFocusNode,
        onFieldSubmitted: (String value) {
          //Do anything with value
          _submitForm();
        },
+       controller: _passwordController,
+       validator: _validateInput,
        decoration: InputDecoration(
          hintText: 'Enter your password',
          labelText: 'Password',
        ),
      ),
+     ElevatedButton(
+       onPressed: _submitForm,
+       child: Text('Register'),
+     ),
    ],
  ),
)

위 코드는 TextFormField 위젯에 두 개의 새 속성을 추가했습니다.

속성: TextEditingController 객체 및

controller 속성: 문자열 매개 변수(입력 필드의 값)를 받아들이고 문자열 값(오류 메시지 검증)이나 validator을 되돌려주는 함수.

null 대상은 사용자가 TextEditingController 속성을 통해 입력 필드를 입력할 때 입력 필드의 값에 접근할 수 있도록 한다.4개text의 대상이 실례화되어 TextEditingController, TextFormField, name, phone와 email 필드의 password 소부품에서 컨트롤러로 사용된다._validateInput라는 함수를 정의했다.이것은 문자열 매개 변수 value 를 받아들인다. 매개 변수가 비어 있으면 문자열 값 'Field required' 을 되돌려주고, 매개 변수가 비어 있지 않으면 null 을 되돌려줍니다._validateInput() 표의 모든 입력 필드에서 검증기로 사용합니다._submitForm() 함수는 name, phone, email 및 password 입력 필드의 값을 콘솔에 인쇄하도록 수정되었습니다.화면에 "Registration sent"메시지를 깜박입니다.폼의 현재 상태를 저장하고 폼의 현재 상태를 리셋하며 폼 검증에 성공할 때 키보드 초점을 nameTextFormField 작은 위젯에 전달합니다._formKey.currentState.validate() 호출표 단자대TextFormField 소부품의 검증 프로그램;모든 검증기가 되돌아오기null하면 되돌아오기true, 그렇지 않으면 되돌아오기false._formKey.currentState.save() 폼의 모든descentantTextFormField 소부품을 저장하고_formKey.currentState.reset() 폼에 포장된 모든TextFormField 소부품을 초기값으로 초기화합니다.
폼에 ElevatedButton 작은 위젯을 추가했습니다. 누르거나 눌렀을 때 제출을 처리하는 데 사용됩니다.함수 _submitForm() 를 속성 onPressed 으로 하고, 텍스트 Register 를 하위 위젯으로 합니다.


사용자 등록 양식 화면
너는 완전한 코드를 볼 수 있다here.
읽어주셔서 감사합니다!🙏🏼