Flutter中如何按下回车键移除DropdownSearch的选中项

要实现按下回车键移除已选中项，你可以通过焦点监听+键盘事件捕获的方式处理，具体步骤如下：

1. 初始化焦点节点与状态变量 #

在你的State类中定义焦点节点和选中项控制变量（若未定义）：

class _YourPageState extends State<YourPage> {
  late FocusNode _dropdownFocusNode;
  UserModel? name; // 控制DropdownSearch选中项的变量
  final TextEditingController itemController = TextEditingController();

  @override
  void initState() {
    super.initState();
    _dropdownFocusNode = FocusNode();
  }

  @override
  void dispose() {
    _dropdownFocusNode.dispose();
    itemController.dispose();
    super.dispose();
  }

2. 编写回车键处理逻辑 #

添加方法捕获回车键按下事件，清空选中项：

void _onEnterPressed(RawKeyEvent event) {
  // 仅响应回车键按下动作
  if (event is RawKeyDownEvent && event.logicalKey == LogicalKeyboardKey.enter) {
    setState(() {
      name = null; // 清空选中项
      itemController.clear(); // 可选：同时清空输入框内容
    });
  }
}

3. 用RawKeyboardListener包裹DropdownSearch #

将DropdownSearch放入RawKeyboardListener中，绑定焦点节点和键盘事件回调：

@override
Widget build(BuildContext context) {
  return RawKeyboardListener(
    focusNode: _dropdownFocusNode,
    onKey: _onEnterPressed,
    child: DropdownSearch<UserModel>(
      selectedItem: name,
      focusNode: _dropdownFocusNode, // 将焦点节点绑定到DropdownSearch
      dropdownBuilder: (context, selectedItem) {
        nama = selectedItem;
        return Text(
          "${nama ?? "${itemController.text ?? ''}"}",
        );
      },
      asyncItems:(filter) async {
        if (ItemList != null) {
          return UserModel.fromJsonList(ItemList.where((user) => 
            user['item_name'].toLowerCase().contains(filter.toLowerCase())
          ).toList());
        }
        return [];
      },
    ),
  );
}

关键说明 #

• 确保页面是StatefulWidget，才能通过setState更新UI状态；若使用Provider、GetX等状态管理框架，替换为对应状态更新方法即可。
• 若需兼容小键盘回车键，可额外判断LogicalKeyboardKey.numpadEnter。

内容的提问来源于stack exchange，提问作者Red Player Gaming