Flutter如何实现带下拉选择功能的可编辑文本输入框

核心问题是Flutter原生提供的下拉类组件均为固定场景设计，定制化空间不足，以下是对应问题的解决方案和最优实现路径：

原有四个方案的问题修正 #

• 直接使用DropdownButtonFormField：这个组件定位是单选选择器，设计层面就不支持自由文本输入，同时下拉菜单样式硬编码在组件源码中，无法直接配置圆角，魔改源码成本太高，不适用当前场景。
• TextFormField嵌入DropdownButton作为suffix的失焦隐藏问题：隐藏问题是因为误用了InputDecoration的suffixIcon字段，这个字段自带焦点态显隐逻辑。如果需要尾部控件常显，改用suffix字段传入下拉触发按钮，配合suffixIconConstraints约束好控件尺寸即可，不会出现失焦隐藏的问题。
• Row并排TextFormField与DropdownButton的方案：*这个实现方式完全合规，通过小组件组合实现复杂交互是Flutter官方推荐的开发模式，不存在规范问题。你遇到的null值预留空白问题，是DropdownButton默认的hint占位、内置边距和最小宽度约束导致的，给组件传入padding: EdgeInsets.zero、hint: SizedBox.shrink()、isExpanded: false，再用SizedBox把DropdownButton的宽度约束到和下拉图标一致，就能完全消除多余空白。但这个方案依然受限于DropdownButton本身的样式限制，无法自定义下拉圆角和菜单高度，灵活度不足。
• 使用PopupMenuButton的方案：这个组件在Flutter 3.0及以上版本已经支持通过shape参数配置菜单圆角，通过constraints参数设置BoxConstraints(maxHeight: 目标高度)即可限制下拉最大高度，但它本质是触发弹出层的按钮，和输入框状态联动的逻辑需要自行实现，做输入过滤、选中回填这类交互的成本较高。

推荐生产级实现 #

最灵活无依赖的方案是基于TextFormField+OverlayEntry自定义实现，完全绕开原生下拉组件的所有限制，所有交互和样式都可控：

1. 用TextEditingController维护输入框内容，FocusNode监听焦点状态控制下拉层显隐
2. 用CompositedTransformTarget和CompositedTransformFollower绑定输入框和下拉层的位置，避免页面滚动时位置错位
3. 下拉层完全自定义，圆角、最大高度、阴影、选项样式都可以自由配置，还可以轻松扩展输入过滤、键盘导航选择选项这类进阶交互

核心实现代码如下：

class EditableDropdown extends StatefulWidget {
  const EditableDropdown({
    super.key,
    required this.options,
    this.onSelected,
    this.maxDropdownHeight = 200,
    this.borderRadius = 8,
  });
  final List<String> options;
  final ValueChanged<String>? onSelected;
  final double maxDropdownHeight;
  final double borderRadius;

  @override
  State<EditableDropdown> createState() => _EditableDropdownState();
}

class _EditableDropdownState extends State<EditableDropdown> {
  final TextEditingController _controller = TextEditingController();
  final FocusNode _focusNode = FocusNode();
  OverlayEntry? _dropdownEntry;
  final LayerLink _layerLink = LayerLink();

  @override
  void initState() {
    super.initState();
    _focusNode.addListener(() {
      if (!_focusNode.hasFocus) _hideDropdown();
    });
  }

  void _showDropdown() {
    _hideDropdown();
    final renderBox = context.findRenderObject() as RenderBox;
    final inputSize = renderBox.size;
    _dropdownEntry = OverlayEntry(
      builder: (context) => Positioned(
        width: inputSize.width,
        child: CompositedTransformFollower(
          link: _layerLink,
          showWhenUnlinked: false,
          offset: Offset(0, inputSize.height + 4),
          child: Material(
            elevation: 4,
            borderRadius: BorderRadius.circular(widget.borderRadius),
            clipBehavior: Clip.hardEdge,
            child: ConstrainedBox(
              constraints: BoxConstraints(maxHeight: widget.maxDropdownHeight),
              child: ListView(
                padding: EdgeInsets.zero,
                shrinkWrap: true,
                children: widget.options.map((option) {
                  return ListTile(
                    title: Text(option),
                    onTap: () {
                      _controller.text = option;
                      _focusNode.unfocus();
                      widget.onSelected?.call(option);
                    },
                  );
                }).toList(),
              ),
            ),
          ),
        ),
      ),
    );
    Overlay.of(context).insert(_dropdownEntry!);
  }

  void _hideDropdown() {
    _dropdownEntry?.remove();
    _dropdownEntry = null;
  }

  @override
  void dispose() {
    _hideDropdown();
    _controller.dispose();
    _focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return CompositedTransformTarget(
      link: _layerLink,
      child: TextFormField(
        controller: _controller,
        focusNode: _focusNode,
        onTap: _showDropdown,
        decoration: InputDecoration(
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(widget.borderRadius),
          ),
          // suffix传入按钮，常显不随焦点隐藏
          suffix: GestureDetector(
            onTap: _showDropdown,
            child: const Icon(Icons.arrow_drop_down),
          ),
        ),
        onChanged: (value) {
          // 可在此处添加输入内容过滤选项的逻辑
          _showDropdown();
        },
      ),
    );
  }
}

这个实现没有使用任何原生下拉组件，不存在之前提到的所有限制：支持自由输入、下拉样式完全自定义、尾部按钮常显、无多余空白占位，维护成本低。

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