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

Question

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

我有一个带有属性和功能的有状态小部件。我想从 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 扩展的小部件以使用 validator、onChanged、onSaved 等，但同时又时间有内部逻辑可以从widget树正常访问吗？

Answer 1

解决方案不是扩展 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'),
                ),
                ]
          );
        
    });
  }
}