Flutter如何将TextEditingController作为参数传递给自定义子组件

你只需要给自定义组件新增控制器入参，同时替换Autocomplete默认生成的内部控制器，直接复用父级传入的控制器实例就能实现状态同步，不会出现状态冲突问题。

第一步：修改自定义AutocompleteField组件 #

• 给组件新增TextEditingController类型的必填参数，用于接收父组件传入的控制器实例
• 将传入的控制器绑定到Autocomplete组件自带的textEditingController属性上，替换组件默认创建的内部控制器，这样输入框的所有状态变化都会同步到父级控制器上

修改后的完整组件代码：

class AutocompleteField extends StatelessWidget {
  const AutocompleteField({
    Key? key,
    required this.textEditingController,
  }) : super(key: key);

  // 接收外部传入的控制器实例
  final TextEditingController textEditingController;

  static const List<String> _kOptions = <String>[
    'Superdry',
    'A&F',
    'H&M',
  ];

  @override
  Widget build(BuildContext context) {
    return Autocomplete<String>(
      // 绑定外部传入的控制器，替换Autocomplete内部默认生成的控制器
      textEditingController: textEditingController,
      optionsBuilder: (TextEditingValue textEditingValue) {
        if (textEditingValue.text == '') {
          return const Iterable<String>.empty();
        }
        return _kOptions.where((String option) {
          return option.contains(textEditingValue.text.toLowerCase());
        });
      },
      fieldViewBuilder: (BuildContext context,
          // 此处回调返回的控制器就是你上面传入的父级实例，直接复用即可
          TextEditingController textEditingController,
          FocusNode focusNode,
          VoidCallback onFieldSubmitted) {
        return TextFormField(
            controller: textEditingController,
            focusNode: focusNode,
            onFieldSubmitted: (str) => onFieldSubmitted(),
            decoration: const InputDecoration(
              border: UnderlineInputBorder(),
              contentPadding: EdgeInsets.only(left: 12.0),
            ));
      },
      onSelected: (String selection) {
        debugPrint('You just selected $selection');
      },
    );
  }
}

第二步：父组件调用说明 #

• 父组件初始化labelTextController之后，按如下方式传参即可，和你原有调用逻辑兼容：

AutocompleteField(textEditingController: labelTextController),

• 记得在父组件（StatefulWidget）的dispose生命周期中释放控制器实例，避免内存泄漏：

@override
void dispose() {
  labelTextController.dispose();
  super.dispose();
}

注意：不要跳过给Autocomplete组件本身设置textEditingController的步骤，如果只给内部的TextFormField设置外部controller，会和Autocomplete内部维护的默认控制器冲突，出现输入异常、联想选项不显示的问题。

完成上述修改后，你在父组件中通过labelTextController.text就能直接拿到输入框的实时内容，也可以通过labelTextController.text = 'xxx'的方式直接设置输入框的显示值，所有状态都会和子组件内的输入框完全同步。

内容的提问来源于stack exchange，提问作者jansemrau