Flutter onChanged 和 onSaved 一起用于文本输入

Question

我一直在尝试在 Flutter 中实现一个小表单，发现 onChanged 和 onSaved 事件在 2 个 TextInput 小部件中的任何一个上都不可用。

onChanged 定义在 TextField 小部件中，onSaved 定义在 TextFormField 小部件中。一种解决方法是使用 TextEditingController 来监视更改，但这会添加一堆额外的代码行来添加监听器、删除监听器和处置。有没有更好的解决方案来解决这个问题？

Answer 1

您可以创建自己的小部件来支持该方法，如下所示:

    import 'package:flutter/material.dart';

    class MyTextField extends StatefulWidget {
      final Key key;
      final String initialValue;
      final FocusNode focusNode;
      final InputDecoration decoration;
      final TextInputType keyboardType;
      final TextInputAction textInputAction;
      final TextStyle style;
      final TextAlign textAlign;
      final bool autofocus;
      final bool obscureText;
      final bool autocorrect;
      final bool autovalidate;
      final bool maxLengthEnforced;
      final int maxLines;
      final int maxLength;
      final VoidCallback onEditingComplete;
      final ValueChanged<String> onFieldSubmitted;
      final FormFieldSetter<String> onSaved;
      final FormFieldValidator<String> validator;
      final bool enabled;
      final Brightness keyboardAppearance;
      final EdgeInsets scrollPadding;
      final ValueChanged<String> onChanged;

      MyTextField(
          {this.key,
          this.initialValue,
          this.focusNode,
          this.decoration = const InputDecoration(),
          this.keyboardType = TextInputType.text,
          this.textInputAction = TextInputAction.done,
          this.style,
          this.textAlign = TextAlign.start,
          this.autofocus = false,
          this.obscureText = false,
          this.autocorrect = true,
          this.autovalidate = false,
          this.maxLengthEnforced = true,
          this.maxLines = 1,
          this.maxLength,
          this.onEditingComplete,
          this.onFieldSubmitted,
          this.onSaved,
          this.validator,
          this.enabled,
          this.keyboardAppearance,
          this.scrollPadding = const EdgeInsets.all(20.0),
          this.onChanged});

      @override
      _MyTextFieldState createState() => _MyTextFieldState();
    }

    class _MyTextFieldState extends State<MyTextField> {
      final TextEditingController _controller = new TextEditingController();

      _onChangedValue() {
        if (widget.onChanged != null) {
          widget.onChanged(_controller.text);
        }
      }

      @override
      void initState() {
        _controller.addListener(_onChangedValue);
        super.initState();
      }

      @override
      void dispose() {
        _controller.removeListener(_onChangedValue);
        _controller.dispose();
        super.dispose();
      }

      @override
      Widget build(BuildContext context) {
        return TextFormField(
          key: widget.key,
          controller: _controller,
          initialValue: widget.initialValue,
          focusNode: widget.focusNode,
          decoration: widget.decoration,
          keyboardType: widget.keyboardType,
          textInputAction: widget.textInputAction,
          style: widget.style,
          textAlign: widget.textAlign,
          autofocus: widget.autofocus,
          obscureText: widget.obscureText,
          autocorrect: widget.autocorrect,
          autovalidate: widget.autovalidate,
          maxLengthEnforced: widget.maxLengthEnforced,
          maxLines: widget.maxLines,
          onEditingComplete: widget.onEditingComplete,
          onFieldSubmitted: widget.onFieldSubmitted,
          onSaved: widget.onSaved,
          validator: widget.validator,
          enabled: widget.enabled,
          keyboardAppearance: widget.keyboardAppearance,
          scrollPadding: widget.scrollPadding,
        );
      }
    }

并将其包含在您的页面中:

    Padding(
              padding: EdgeInsets.all(20.0),
              child: Center(child: MyTextField(
                onChanged: (value) {
                  print("testing onchanged $value");
                },
              )),
            )