You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter中点击DropdownSearch后如何让搜索框自动获取焦点?

解决DropdownSearch弹出框搜索框自动获焦问题

要实现点击DropdownSearch时弹出框内的搜索框自动获取焦点,不需要用到dropdownBuilder,直接通过配置PopupProps里的searchFieldProps就能搞定,具体操作如下:

  • 移除popupProps的const修饰符(因为要修改内部可变属性)
  • 在PopupProps.menu中添加searchFieldProps参数,设置autofocus: true

修改后的完整代码:

child: DropdownSearch<String>(
  popupProps: PopupProps.menu( // 去掉const修饰符
    showSearchBox: true,
    showSelectedItems: true,
    searchDelay: Duration(milliseconds: 40),
    searchFieldProps: TextFieldProps( // 添加搜索框自动获焦配置
      autofocus: true,
    ),
  ),
  dropdownDecoratorProps: DropDownDecoratorProps(
    dropdownSearchDecoration: InputDecoration(
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
      ),
      isDense: true,
    )
  ),
  onChanged: (String? value) {
    setState(() {
      _signs!.signs[index].type = RoadSignType.fromDisplay(value!);
    });
  },
  items: _signTypeItems,
),

配置完成后,每次点击DropdownSearch弹出菜单时,搜索框会自动获取焦点,可直接输入内容。

内容的提问来源于stack exchange,提问作者idodoqdo

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.21 06:58:11