如何关闭Flutter AutoComplete组件的自动弹出下拉框？

问题判定 #

这不是你遗漏了配置项，也不属于组件bug，是Flutter官方自带Autocomplete组件的原生功能设计限制：默认仅在输入内容无匹配项、选中选项两种场景下关闭下拉弹窗，没有内置点击空白区域、按下ESC键的关闭逻辑。

修复方案 #

你可以通过以下两种方式实现你需要的关闭能力：

• 基于RawAutocomplete自定义扩展
  官方提供的RawAutocomplete支持完全自定义选项弹窗的交互逻辑，你可以做两个改造：
  1. 给输入框绑定焦点节点，监听键盘事件，识别到ESC按键时手动隐藏选项弹窗
  2. 在全局层级添加点击事件监听，当点击位置不在输入框、选项弹窗范围内时，手动隐藏选项弹窗
     核心参考代码：

  final _focusNode = FocusNode(onKeyEvent: (node, event) {
    if (event.logicalKey == LogicalKeyboardKey.escape) {
      // 执行隐藏选项逻辑
      return KeyEventResult.handled;
    }
    return KeyEventResult.ignored;
  });
  

• 使用第三方成熟组件
  社区开源的自动完成类组件大多已经内置了上述关闭逻辑，不需要自行开发交互适配，可直接引入使用。

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