Flutter中如何实现Autocomplete选中选项后清空输入框内容

实现思路 #

Flutter 内置的Autocomplete组件默认生成的文本编辑控制器没有对外暴露直接操作的入口，要实现选中后清空输入框的效果，只需要拿到组件绑定的文本控制器实例，在选中回调中调用清空方法即可。

具体实现步骤 #

• 在组件对应的State类中声明用于持有Autocomplete输入框控制器的变量，同时做好控制器的初始化和内存释放逻辑
• 重写Autocomplete的fieldViewBuilder属性，拿到组件内部使用的TextEditingController实例
• 在onSelected选中回调中，在保存选中值的逻辑之后，调用控制器的clear()方法清空输入框内容

完整代码示例 #

首先是State类中的控制器声明和生命周期处理：

class _YourPageState extends State<YourPage> {
  // 存储选中值的变量
  String selected = '';
  // 从JSON加载的补全数据源
  late List<String> autoCompleteData;
  // 持有自动补全输入框的控制器
  late TextEditingController _autoCompleteController;

  @override
  void initState() {
    super.initState();
    _autoCompleteController = TextEditingController();
    // 此处可替换为你的JSON数据加载逻辑
    autoCompleteData = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
  }

  @override
  void dispose() {
    // 释放控制器避免内存泄漏
    _autoCompleteController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 修改后的Autocomplete组件
    return Autocomplete<String>(
      optionsBuilder: (TextEditingValue textEditingValue){
        if (textEditingValue.text.isEmpty){
          return const Iterable<String>.empty();
        }
        return autoCompleteData.where((word) => word.toLowerCase()
            .contains(textEditingValue.text.toLowerCase())
        );
      },
      fieldViewBuilder: (context, textEditingController, focusNode, onFieldSubmitted) {
        // 持有组件内部的文本控制器实例
        _autoCompleteController = textEditingController;
        return TextField(
          controller: textEditingController,
          focusNode: focusNode,
          decoration: const InputDecoration(
            hintText: '输入内容匹配选项'
          ),
        );
      },
      onSelected: (value) {
        print("this is the value $value");
        setState((){
          selected = value.toString();
        });
        // 选中后清空输入框
        _autoCompleteController.clear();
      },
    );
  }
}

如果需要自定义输入框的样式、装饰、输入校验等逻辑，直接在fieldViewBuilder返回的TextField/TextFormField中配置即可，不会影响自动补全的原有匹配、弹出选项逻辑。

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