如何将回车键设为Flutter RawAutoComplete的选项选中快捷键？

无需额外注册快捷键，通过结合RawAutoComplete的状态属性与输入框的提交回调即可实现，具体步骤如下：

1. 给RawAutoComplete绑定一个GlobalKey，用于获取组件的状态实例，从而访问当前高亮的选项。
2. 在输入框的onSubmitted回调中，判断是否存在当前高亮选项，若存在则触发选中逻辑。

代码示例 #

final _autoCompleteKey = GlobalKey<RawAutoCompleteState<String>>();

RawAutoComplete<String>(
  key: _autoCompleteKey,
  optionsBuilder: (TextEditingValue textEditingValue) {
    // 自定义选项生成逻辑，示例为水果列表过滤
    if (textEditingValue.text.isEmpty) {
      return const Iterable<String>.empty();
    }
    return ['Apple', 'Banana', 'Cherry', 'Date']
        .where((option) => option.toLowerCase().contains(textEditingValue.text.toLowerCase()));
  },
  fieldViewBuilder: (BuildContext context, TextEditingController textEditingController, FocusNode focusNode, VoidCallback onFieldSubmitted) {
    return TextField(
      controller: textEditingController,
      focusNode: focusNode,
      onSubmitted: (String value) {
        // 获取当前高亮的选项
        final currentOption = _autoCompleteKey.currentState?.currentOption;
        if (currentOption != null) {
          // 触发选中操作
          _autoCompleteKey.currentState?.onSelected(currentOption);
        }
      },
      decoration: const InputDecoration(
        hintText: '输入水果名称',
        border: OutlineInputBorder(),
      ),
    );
  },
  onSelected: (String selection) {
    // 处理选中后的业务逻辑
    debugPrint('选中选项：$selection');
  },
  optionsViewBuilder: (BuildContext context, AutocompleteOnSelected<String> onSelected, Iterable<String> options) {
    return Align(
      alignment: Alignment.topLeft,
      child: Material(
        elevation: 4.0,
        child: SizedBox(
          height: 200.0,
          child: ListView.builder(
            padding: EdgeInsets.zero,
            itemCount: options.length,
            itemBuilder: (BuildContext context, int index) {
              final option = options.elementAt(index);
              return InkWell(
                onTap: () => onSelected(option),
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Text(option),
                ),
              );
            },
          ),
        ),
      ),
    );
  },
);

逻辑说明 #

• _autoCompleteKey用于获取RawAutoComplete的状态实例，进而拿到currentOption（当前下拉面板中高亮的选项）。
• 当用户按下回车键时，TextField的onSubmitted回调触发，此时若下拉面板有高亮选项，就调用onSelected完成选中操作，完全贴合原生快捷键的交互逻辑。

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