如何将验证器传递给Flutter中的`TextFormField'？

Question

我在我的flutter应用程序中为我的表单动态生成文本字段。请检查以下代码

Widget _buildInputFields(
    String label,
    TextEditingController textController,
    TextInputType textInputType,
    IconData icon,
    Color iconColor,
  ) {
    return Container(
        margin: EdgeInsets.only(left: 20, bottom: 20),
        child: Container(
          padding: EdgeInsets.only(right: 20),
          child: Row(
            children: <Widget>[
              Flexible(
                child: TextFormField(
                  controller: textController,
                  validator: (value) {
                    if (value.isEmpty) {
                      return 'Please enter some text';
                    }
                  },
                  style: new TextStyle(color: Colors.white),
                  keyboardType: textInputType,
                  decoration: InputDecoration(
                      labelText: label,
                      fillColor: Colors.white,
                      labelStyle: TextStyle(
                          color: Colors.white, fontWeight: FontWeight.w600),
                      enabledBorder: OutlineInputBorder(
                        borderSide:
                            const BorderSide(color: Colors.white30, width: 2.0),
                        borderRadius: BorderRadius.circular(25.0),
                      ),
                      suffixIcon: IconButton(
                        icon: Icon(icon, color: iconColor),
                        onPressed: () {},
                      )),
                ),
              ),
            ],
          ),
        ));
  }

上面的方法返回一个TextFormField与我需要的样式，所以我不必重新编码数百次。我只是调用方法，然后我得到一个新的TextFormField

无论如何，我需要进行表单验证，并且每个字段都有不同的验证。在颤动中，我怎样才能将validator传递给textformfield？

Answer 1

您可以简单地将验证器作为参数传递，就像您对其他人一样。您所需要的只是传递一个函数，该函数将String作为参数并返回一个String。

//username validator possible structure
   Function(String) usernameValidator = (String username){
        if(username.isEmpty){
          return 'Username empty';
        }else if(username.length < 3){
          return 'Username short';
        }

        return null;
  };

  //password validator possible structure
  passwordValidator(String password){
        if(password.isEmpty){
          return 'Password empty';
        }else if(password.length < 3){
          return 'PasswordShort';
        }
        return null;
  }  



 //new build function
Widget _buildInputFields(
    String label,
    TextEditingController textController,
    TextInputType textInputType,
    IconData icon,
    Color iconColor,
    String Function(String) validator
  ) {
    return Container(
        margin: EdgeInsets.only(left: 20, bottom: 20),
        child: Container(
          padding: EdgeInsets.only(right: 20),
          child: Row(
            children: <Widget>[
              Flexible(
                child: TextFormField(
                  controller: textController,
                  validator: validator,
                  style: new TextStyle(color: Colors.white),
                  keyboardType: textInputType,
                  decoration: InputDecoration(
                      labelText: label,
                      fillColor: Colors.white,
                      labelStyle: TextStyle(
                          color: Colors.white, fontWeight: FontWeight.w600),
                      enabledBorder: OutlineInputBorder(
                        borderSide:
                            const BorderSide(color: Colors.white30, width: 2.0),
                        borderRadius: BorderRadius.circular(25.0),
                      ),
                      suffixIcon: IconButton(
                        icon: Icon(icon, color: iconColor),
                        onPressed: () {},
                      )),
                ),
              ),
            ],
          ),
        ));
  }

    //calling your function
   _buildInputFields(label, textController, textInputType, icon, iconColor, usernameValidator);
   _buildInputFields(label, textController, textInputType, icon, iconColor, passwordValidator);

Answer 2

由于您已经在使用验证器，我猜您只需要将它作为_buildInputFields中的参数传递，对吧？

它会是这样的：

Widget _buildInputFields(
...
    Color iconColor,
    Function validator,
  ) {
...
                child: TextFormField(
                  controller: textController,
                  validator: validator,
                  style: new TextStyle(color: Colors.white),
...
  }

你可以使用它，你会很好。

但是，您可以更具体，并使用验证器Function类型，如下所示：

Widget _buildInputFields(
...
    Color iconColor,
    FormFieldValidator<String> validator,
...

因此，您可以将验证器定义为State类的方法并重用它们，或者直接在_buildInputFields调用中指定它们。

在下面的示例中，您有一个字段Name，它使用_notEmptyValidator，这是在同一个类中定义的方法。由于LastName遵循相同的逻辑，因此它重用此方法。

...
 String _notEmptyValidator(String value) {
   if (value.isEmpty) {
     return 'Please enter some text';
   }
 }
...
 Column(
  children: <Widget>[ 
    _buildInputFields("Name", _notEmptyValidator),
    _buildInputFields("Last Name", _notEmptyValidator),
text" : null),
  ]
...

在下面的示例中，我保留以前的字段，但我添加了一个新字段。这个新字段有一个非常具体的验证逻辑，我将在_buildInputFields调用中定义验证方法，因此不会在其他字段中重用它。

...
 Column(
  children: <Widget>[ 
    _buildInputFields("Name", _notEmptyValidator),
    _buildInputFields("Last Name", _notEmptyValidator),
text" : null),
    _buildInputFields("Valid Number", (value) {
      if (double.tryParse(value) == null) {
        return "Please input a valid number";
      }
    },
  ]
...