Flutter TextFormField：如何将 Class 函数设置为 TextFormField 验证器的函数？

Question

我正在尝试从一个类中设置一个函数作为 TextFormField 验证器函数的函数，但似乎我做得不对。

我是飞镖新手。拜托，我需要你的帮助。

这是我目前的一些代码。

class Rule{
  int min;
  int max;
  bool required = false;

  String name;

  Rule({this.min, this.max, this.required});

  validator(String val){
      if(val.length < this.min && this.min != null)
        return "$name must be equal or greater than $min";

      if(val.length > this.max && this.max != null)
        return "$name must be equal less than $max";

      if(val.length > 0 && this.required)
        return "$name is required.";

      return null;
  }

}

这是我的表单验证器类。

class FormValidator {
  final formKey = new GlobalKey<FormState>();

  dynamic inputs =  {
    'none' : new Rule()
  };

  FormValidator({@required this.inputs});

  Function getValidator(String fieldName){
    Rule rule = inputs[fieldName];
    rule.name = fieldName;

    return rule.validator;
  }


  GlobalKey getFormState () => this.formKey;
}

这是我的小部件构建器。

@override
  Widget build(BuildContext context) {
    final scaffoldKey = new GlobalKey<ScaffoldState>();

    Map<String, Rule> formInputs = {
      'username': new Rule(min: 6, max: 12, required: true),
      'password': new Rule(min: 6, max: 12, required: true)
    };

    FormValidator validator = new FormValidator(inputs: formInputs);


    void submit(){

    }

    return SafeArea(
      child: Scaffold(
        key: scaffoldKey,
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Form(
                  key: validator.getFormState(),
                  child: new Theme(
                    data: new ThemeData(
                      brightness: Brightness.dark,
                      primarySwatch: Colors.teal,
                      inputDecorationTheme: new InputDecorationTheme(
                        labelStyle: new TextStyle(
                          color: Colors.teal,
                          fontSize: 20
                        )
                      )
                    ),
                    child: Container(
                      padding: const EdgeInsets.all(40),
                      child: Column(
                        children: <Widget>[
                          new TextFormField(

                            decoration: InputDecoration(
                              labelText: 'Enter Username:',
                              icon: Icon(Icons.person, size: 40,)
                            ),
                            keyboardType: TextInputType.text,
                            validator: validator.getValidator('username'),
                          ),
                          new TextFormField(
                            decoration: InputDecoration(
                              labelText: 'Enter Password:',
                              icon: Icon(Icons.lock, size: 40,),
                            ),
                            keyboardType: TextInputType.text,
                            obscureText: true,
                            validator: validator.getValidator('password'),
                          ),
                          new Padding(padding: const EdgeInsets.only(top: 30)),
                          new MaterialButton(
                              child: new Text('Login'),
                              color: Colors.teal,
                              textColor: Colors.white,
                              onPressed: submit
                          )
                        ],
                      ),
                    ),
                  )
              )
            ],
          ),
        ),
      ),
    );
  }

我需要你的指导。

Answer 1

您试图将类成员函数作为闭包返回，并且函数签名语法也不完整。

你应该让你的 Rule 对象返回一个处理验证的函数的新实例，而不是一个指向 Rule 类的成员函数的函数指针......它仍然捕获 Rule 对象内部的状态。

class Rule{
  int min;
  int max;
  bool required = false;

  String name;

  Rule({this.min, this.max, this.required});

  String Function(String) validator() {
     return (String val) {
      if(val.length < this.min && this.min != null)
        return "$name must be equal or greater than $min";

      if(val.length > this.max && this.max != null)
        return "$name must be equal less than $max";

      if(val.length > 0 && this.required)
        return "$name is required.";

      return null;
     };
   }
}

class FormValidator {
  final formKey = new GlobalKey<FormState>();

  dynamic inputs =  {
    'none' : new Rule()
  };

  FormValidator({@required this.inputs});

  String Function(String) getValidator(String fieldName){
    Rule rule = inputs[fieldName];
    rule.name = fieldName;

    return rule.validator();
  }


  GlobalKey getFormState () => this.formKey;
}