在Flutter中使用Overlay实现自定义下拉菜单

核心思路是放弃依赖焦点判断，改用全局点击监听 + 组件区域命中检测的方式，精准区分点击区域是否在TextField或Overlay内，只有点击两者之外时才关闭Overlay。

实现步骤与代码示例 #

1. 定义全局Key与状态变量
   用来获取TextField和Overlay的渲染区域，以及控制Overlay的显示状态：

   final _textFieldKey = GlobalKey();
   final _overlayEntryKey = GlobalKey();
   OverlayEntry? _overlayEntry;
   bool _isOverlayVisible = false;
   

2. 构建TextField与触发逻辑
   点击TextField时弹出Overlay：

   TextField(
     key: _textFieldKey,
     onTap: () {
       if (!_isOverlayVisible) _showOverlay(context);
     },
     decoration: const InputDecoration(
       hintText: "点击展开下拉",
       border: OutlineInputBorder(),
     ),
   )
   

3. 创建并插入Overlay
   注意给Overlay内部包裹GestureDetector并设置HitTestBehavior.opaque，阻止点击事件透传到全局监听：

   void _showOverlay(BuildContext context) {
     final overlayState = Overlay.of(context);
     final textFieldRenderBox = _textFieldKey.currentContext!.findRenderObject() as RenderBox;
     final textFieldPos = textFieldRenderBox.localToGlobal(Offset.zero);
     final textFieldSize = textFieldRenderBox.size;
   
     _overlayEntry = OverlayEntry(
       builder: (context) => Positioned(
         left: textFieldPos.dx,
         top: textFieldPos.dy + textFieldSize.height,
         width: textFieldSize.width,
         child: GestureDetector(
           key: _overlayEntryKey,
           behavior: HitTestBehavior.opaque, // 拦截内部点击，不触发全局监听
           child: Material(
             elevation: 4,
             child: ListView.builder(
               shrinkWrap: true,
               itemCount: 5,
               itemBuilder: (context, index) => ListTile(
                 title: Text("选项 ${index + 1}"),
                 onTap: () {
                   // 处理选项选择逻辑
                   _hideOverlay();
                 },
               ),
             ),
           ),
         ),
       ),
     );
   
     overlayState.insert(_overlayEntry!);
     _isOverlayVisible = true;
   }
   
   void _hideOverlay() {
     _overlayEntry?.remove();
     _overlayEntry = null;
     _isOverlayVisible = false;
   }
   

4. 全局点击监听与区域判断
   用GestureDetector包裹整个页面，在点击时判断点击位置是否在TextField或Overlay的区域内：

   @override
   Widget build(BuildContext context) {
     return GestureDetector(
       onTapDown: (TapDownDetails details) {
         if (_isOverlayVisible) {
           // 获取TextField的全局区域
           final textFieldRenderBox = _textFieldKey.currentContext!.findRenderObject() as RenderBox;
           final textFieldRect = Rect.fromLTWH(
             textFieldRenderBox.localToGlobal(Offset.zero).dx,
             textFieldRenderBox.localToGlobal(Offset.zero).dy,
             textFieldRenderBox.size.width,
             textFieldRenderBox.size.height,
           );
           final isTapOnTextField = textFieldRect.contains(details.globalPosition);
   
           // 获取Overlay的全局区域
           bool isTapOnOverlay = false;
           if (_overlayEntryKey.currentContext != null) {
             final overlayRenderBox = _overlayEntryKey.currentContext!.findRenderObject() as RenderBox;
             final overlayRect = Rect.fromLTWH(
               overlayRenderBox.localToGlobal(Offset.zero).dx,
               overlayRenderBox.localToGlobal(Offset.zero).dy,
               overlayRenderBox.size.width,
               overlayRenderBox.size.height,
             );
             isTapOnOverlay = overlayRect.contains(details.globalPosition);
           }
   
           // 仅点击两者之外时关闭Overlay
           if (!isTapOnTextField && !isTapOnOverlay) {
             _hideOverlay();
           }
         }
       },
       behavior: HitTestBehavior.translucent, // 允许子组件接收点击事件
       child: Scaffold(
         appBar: AppBar(title: const Text("自定义下拉菜单")),
         body: Padding(
           padding: const EdgeInsets.all(16.0),
           child: TextField(
             key: _textFieldKey,
             onTap: () {
               if (!_isOverlayVisible) _showOverlay(context);
             },
             decoration: const InputDecoration(
               hintText: "点击展开下拉",
               border: OutlineInputBorder(),
             ),
           ),
         ),
       ),
     );
   }
   

关键说明 #

• 事件拦截：Overlay内部的GestureDetector设置HitTestBehavior.opaque，确保点击选项时不会触发全局的点击监听，避免误关闭。
• 区域计算：通过GlobalKey获取组件的RenderBox，将局部坐标转为全局坐标，生成矩形区域后判断点击位置是否在区域内。
• 触摸/鼠标兼容：示例中用onTapDown获取触摸位置，适配移动设备；如果是桌面端，也可以用MouseTracker获取鼠标位置，但onTapDown更通用。

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