Flutter中DropdownMenu箭头点击检测及搜索内容自动清空需求

问题分析 #

你使用带搜索功能的DropdownMenu，需要在点击右侧箭头展开条目列表时自动清空已输入的搜索内容。尝试用InkWell包裹未成功，因为DropdownMenu自身的事件会优先触发，导致InkWell的onTap无法执行，且这种方式也无法精准区分“点击箭头”的操作。

实现思路 #

利用Flutter的NotificationListener监听菜单展开的通知（MenuOpenNotification），当菜单被打开时，直接调用文本控制器的clear()方法清空搜索内容。这种方式能精准捕获菜单展开的事件，无需额外处理点击区域的区分。

修改后的代码示例 #

Container(
  height: 40,
  decoration: BoxDecoration(
    borderRadius: const BorderRadius.all(Radius.circular(10.0)),
    color: Theme.of(context).colorScheme.secondary,
  ),
  width: double.infinity,
  child: NotificationListener<MenuOpenNotification>(
    onNotification: (notification) {
      // 菜单展开时清空搜索内容
      modelController.clear();
      return false; // 允许通知继续传播
    },
    child: DropdownMenu<Models>(
      label: Text(translation(context)!.dropModel),
      dropdownMenuEntries: dropdownModelsItems,
      requestFocusOnTap: true,
      onSelected: dropDownModelsCallBack,
      enableSearch: true,
      controller: modelController,
      enableFilter: true,
      menuStyle: const MenuStyle(
        alignment: Alignment.bottomLeft,
        maximumSize: MaterialStatePropertyAll(Size.fromHeight(400)),
      ),
      expandedInsets: const EdgeInsets.symmetric(horizontal: 0),
      inputDecorationTheme: InputDecorationTheme(
        isDense: true,
        contentPadding: const EdgeInsets.symmetric(horizontal: 10),
        constraints: const BoxConstraints(minWidth: 300, maxWidth: 700, maxHeight: 40),
        fillColor: Colors.red,
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8),
        ),
      ),
    ),
  ),
),

补充说明 #

• MenuOpenNotification是Flutter Material组件库内置的通知，当DropdownMenu的菜单展开时会自动发送该通知。
• 返回false是为了让通知继续传递给其他可能的监听器，若不需要可以返回true终止传播。
• 确保modelController是你在State类中初始化的TextEditingController实例，示例初始化代码：

  late final TextEditingController modelController;
  
  @override
  void initState() {
    super.initState();
    modelController = TextEditingController();
  }
  
  @override
  void dispose() {
    modelController.dispose();
    super.dispose();
  }
  

内容的提问来源于stack exchange，提问作者Alexandre B.