如何在TextField的onTap()事件中触发DropdownButton菜单显示

核心思路 #

通过状态变量控制Dropdown的显示/隐藏，点击TextField时切换状态，结合布局组件（Stack或Overlay）将Dropdown放置在合适位置。

方案一：Stack布局实现（简单易上手） #

直接用Stack把Dropdown放在TextField下方，通过布尔变量控制显示状态，代码如下：

class PriorityDropdownTextField extends StatefulWidget {
  const PriorityDropdownTextField({super.key});

  @override
  State<PriorityDropdownTextField> createState() => _PriorityDropdownTextFieldState();
}

class _PriorityDropdownTextFieldState extends State<PriorityDropdownTextField> {
  bool _showDropdown = false;
  String? dropdownValue;
  final List<String> dropdownList = ['高', '中', '低']; // 替换为你的选项列表

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.topCenter,
      children: [
        // 自定义样式的TextField容器
        Container(
          margin: const EdgeInsets.all(10),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            color: const Color.fromARGB(255, 70, 70, 70),
          ),
          child: TextField(
            readOnly: true,
            decoration: InputDecoration(
              prefixIcon: const Icon(
                Icons.priority_high_outlined,
                color: Colors.orange,
              ),
              border: InputBorder.none,
              hintText: dropdownValue ?? "Priority", // 显示选中值或默认提示
              suffixIcon: Icon(
                _showDropdown ? Icons.arrow_drop_up : Icons.arrow_drop_down,
                color: Colors.orange,
              ),
            ),
            onTap: () {
              setState(() {
                _showDropdown = !_showDropdown; // 切换下拉菜单显示状态
              });
            },
          ),
        ),
        // 下拉菜单，根据状态显示/隐藏
        if (_showDropdown)
          Positioned(
            top: 60, // 调整位置使其位于TextField下方
            left: 10,
            right: 10,
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8),
                color: const Color.fromARGB(255, 70, 70, 70),
              ),
              child: DropdownButton(
                isExpanded: true,
                underline: const SizedBox(), // 去掉默认下划线，匹配自定义样式
                padding: const EdgeInsets.symmetric(horizontal: 16),
                hint: const Text("Priority", style: TextStyle(color: Colors.grey)),
                value: dropdownValue,
                onChanged: (value) {
                  setState(() {
                    dropdownValue = value!;
                    _showDropdown = false; // 选择后自动关闭下拉菜单
                  });
                },
                items: dropdownList.map((e) {
                  return DropdownMenuItem(
                    value: e,
                    child: Text(e, style: const TextStyle(color: Colors.white)),
                  );
                }).toList(),
              ),
            ),
          ),
      ],
    );
  }
}

关键点说明：

• 用Stack+Positioned固定Dropdown位置，确保在TextField正下方
• 后缀箭头图标直观反馈下拉状态
• 选择选项后自动关闭下拉并更新TextField显示内容

方案二：Overlay实现（原生悬浮体验） #

如果需要下拉菜单不受父组件约束（比如父组件有滚动或裁剪），可以用Overlay将Dropdown悬浮在页面顶层：

class PriorityDropdownTextField extends StatefulWidget {
  const PriorityDropdownTextField({super.key});

  @override
  State<PriorityDropdownTextField> createState() => _PriorityDropdownTextFieldState();
}

class _PriorityDropdownTextFieldState extends State<PriorityDropdownTextField> {
  OverlayEntry? _dropdownOverlay;
  String? dropdownValue;
  final List<String> dropdownList = ['高', '中', '低'];

  // 显示悬浮下拉菜单
  void _showDropdownOverlay() {
    final renderBox = context.findRenderObject() as RenderBox;
    final offset = renderBox.localToGlobal(Offset.zero);
    final size = renderBox.size;

    _dropdownOverlay = OverlayEntry(
      builder: (context) => Positioned(
        left: offset.dx + 10,
        top: offset.dy + size.height + 5,
        width: size.width - 20,
        child: Material(
          color: const Color.fromARGB(255, 70, 70, 70),
          borderRadius: BorderRadius.circular(8),
          child: DropdownButton(
            isExpanded: true,
            underline: const SizedBox(),
            padding: const EdgeInsets.symmetric(horizontal: 16),
            hint: const Text("Priority", style: TextStyle(color: Colors.grey)),
            value: dropdownValue,
            onChanged: (value) {
              setState(() {
                dropdownValue = value!;
              });
              _hideDropdownOverlay();
            },
            items: dropdownList.map((e) {
              return DropdownMenuItem(
                value: e,
                child: Text(e, style: const TextStyle(color: Colors.white)),
              );
            }).toList(),
          ),
        ),
      ),
    );

    Overlay.of(context).insert(_dropdownOverlay!);
  }

  // 隐藏悬浮下拉菜单
  void _hideDropdownOverlay() {
    _dropdownOverlay?.remove();
    _dropdownOverlay = null;
  }

  @override
  void dispose() {
    _hideDropdownOverlay(); // 页面销毁时清理Overlay
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(10),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        color: const Color.fromARGB(255, 70, 70, 70),
      ),
      child: TextField(
        readOnly: true,
        decoration: InputDecoration(
          prefixIcon: const Icon(
            Icons.priority_high_outlined,
            color: Colors.orange,
          ),
          border: InputBorder.none,
          hintText: dropdownValue ?? "Priority",
          suffixIcon: const Icon(Icons.arrow_drop_down, color: Colors.orange),
        ),
        onTap: () {
          _dropdownOverlay == null ? _showDropdownOverlay() : _hideDropdownOverlay();
        },
      ),
    );
  }
}

关键点说明：

• 利用OverlayEntry将Dropdown插入到页面顶层，不受父组件布局限制
• 通过localToGlobal计算TextField的屏幕位置，准确定位Dropdown
• 在dispose方法中清理Overlay，避免内存泄漏

方案选择建议 #

• Stack方案：适合布局简单、下拉菜单不需要跨组件的场景，代码量少易维护
• Overlay方案：适合复杂布局（如滚动页面、嵌套组件），提供更原生的悬浮下拉体验

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