Flutter DropDownMenu文本框如何配置输入格式化实现单词首字母大写？

一、实现 DropdownMenu 输入框单词首字母大写 #

Flutter 原生 DropdownMenu 没有直接提供 inputFormatters 配置，但可以通过自定义输入框的方式实现需求。你可以利用 DropdownMenu 的 textField 参数，传入带有格式化器的 TextFormField，同时绑定组件自带的搜索控制器，保证筛选功能正常运行。

1. 自定义首字母大写格式化器 #

class CapitalizeWordsFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    final text = newValue.text;
    if (text.isEmpty) return newValue;
    
    // 分割单词并实现首字母大写、其余字母小写
    final capitalizedText = text.split(' ').map((word) {
      if (word.length <= 1) return word.toUpperCase();
      return '${word[0].toUpperCase()}${word.substring(1).toLowerCase()}';
    }).join(' ');

    return TextEditingValue(
      text: capitalizedText,
      selection: newValue.selection,
    );
  }
}

2. 在 DropdownMenu 中使用自定义输入框 #

DropdownMenu<String>(
  dropdownMenuEntries: const [
    DropdownMenuEntry(value: 'apple', label: 'Apple'),
    DropdownMenuEntry(value: 'banana', label: 'Banana'),
    DropdownMenuEntry(value: 'cherry', label: 'Cherry'),
  ],
  searchController: TextEditingController(),
  textField: (context, controller, focusNode) {
    return TextFormField(
      controller: controller,
      focusNode: focusNode,
      inputFormatters: [CapitalizeWordsFormatter()],
      decoration: const InputDecoration(
        hintText: '搜索选项',
        border: OutlineInputBorder(),
        contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      ),
    );
  },
)

二、修复自定义 Stack Dropdown 点击菜单项失效问题 #

你遇到的点击无响应问题，通常由以下几种原因导致，对应解决方案如下：

1. 层级覆盖与事件拦截 #

Stack 中如果菜单组件被下层组件覆盖，或者下层组件的手势控件（如 GestureDetector）消费了点击事件，会导致菜单点击无效。可以通过以下方式解决：

• 用 Positioned 确保菜单处于最上层；
• 菜单显示时，给下层组件添加 IgnorePointer 屏蔽手势拦截。

示例代码：

bool _isMenuOpen = false;

Stack(
  children: [
    // 搜索输入框
    TextField(
      onTap: () => setState(() => _isMenuOpen = true),
      decoration: const InputDecoration(
        hintText: '搜索并选择',
        border: OutlineInputBorder(),
      ),
    ),
    // 下拉菜单
    if (_isMenuOpen)
      Positioned(
        top: 50,
        left: 0,
        right: 0,
        child: Material(
          elevation: 4,
          child: Column(
            children: [
              ListTile(
                title: const Text('Apple'),
                onTap: () {
                  setState(() {
                    _isMenuOpen = false;
                    // 处理选中逻辑
                  });
                },
              ),
              ListTile(
                title: const Text('Banana'),
                onTap: () {
                  setState(() {
                    _isMenuOpen = false;
                    // 处理选中逻辑
                  });
                },
              ),
            ],
          ),
        ),
      ),
    // 屏蔽下层组件手势（仅菜单打开时）
    if (_isMenuOpen)
      Positioned.fill(
        child: IgnorePointer(
          child: Container(color: Colors.transparent),
        ),
      ),
  ],
)

2. 状态管理错误 #

如果菜单的显示状态没有正确更新，点击时菜单可能已被提前隐藏，导致事件无法触发。确保点击菜单项时，先更新状态（如关闭菜单）再处理选中逻辑，且状态变量的更新是同步的。

3. 缺失 Material 上下文 #

Flutter 的手势识别依赖 Material 组件的上下文，如果菜单未包裹在 Material 中，可能导致点击事件无法被识别。给菜单外层添加 Material 组件即可解决。

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