flutter 从有状态小部件中的FormField扩展

rhfm7lfc  于 2022-12-05  发布在  Flutter
关注(0)|答案(1)|浏览(242)

从有状态小部件中的FormField扩展
我有一个带属性和函数的Stateful小部件。我想从FormField扩展小部件,因为我需要验证小部件上的一些用户输入。
似乎不可能从多个类(StatefulWidget和FormField)进行扩展。
如果我尝试创建一个从FormField扩展的普通类:

class CustomInput extends FormField<bool> {
  final Widget label;
  final void Function(bool?) onChanged;

  userClicked() {
    print('User clicked');
  }

  CustomInput({
    required this.label,
    required this.onChanged,
    FormFieldValidator<bool>? validator,
  }) : super(
          validator: validator,
          builder: (field) {           
            return Column(
              children: [
                TextButton(
                  onPressed: () => userClicked(), //<-- The instance member 'userClicked' can't be accessed in an initializer.
                  child: Text('Call internal function'),
                ),

...则无法访问内部方法,因为出现“无法在初始值设定项中访问示例成员”userClicked“。”错误。
那么,如何创建一个从FormField扩展的小部件,以使用validatoronChangedonSaved等,但同时具有可以从小部件树正常访问的内部逻辑呢?

vs91vp4v

vs91vp4v1#

解决方案不是扩展FormField,而是从StatefulWidget返回一个FormField。在本例中,验证内容是一个字符串数组,但它当然可以是任何内容:

class CustomInput extends StatefulWidget {
  final String? Function(List<String>)? validator;
  final Function(List<String>)? onChanged;

  const CustomInput({this.onChanged, this.validator, Key? key}) : super(key: key);

  @override
  State<CustomInput> createState() => _CustomInputState();
}

class _CustomInputState extends State<CustomInput> {

  @override
  void initState() {
    super.initState();
  }
  
 userClicked() {
    print('User clicked');
  }

  @override
  Widget build(BuildContext context) {
    return FormField(validator: ((value) {
      if (widget.validator != null) {
        return widget.validator!(widget.imagePaths);
      }
      return null;
    }), builder: (FormFieldState<List<String>> state) {
      return Column(
              children: [
                TextButton(
                  onPressed: () => userClicked(), //<-- The instance member 'userClicked' can't be accessed in an initializer.
                  child: Text('Call internal function'),
                ),
                ]
          );
        
    });
  }
}

相关问题