从状态Widget中的FormField扩展

Question

从状态Widget中的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等的小部件，同时又可以从小部件树访问内部逻辑呢？

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'),
                ),
                ]
          );
        
    });
  }
}