Flutter实现可隐藏Overlay Menu：点击显示/隐藏上下菜单方案

嘿，我刚好做过类似的需求，给你分享一下实现思路和代码示例吧！

核心思路 #

我们可以借助Flutter的Overlay组件来实现悬浮菜单，通过GestureDetector监听全局点击，同时给中间可长按的文本单独设置手势识别器，让长按事件优先触发，不会干扰菜单的显示/隐藏逻辑。

具体实现步骤 #

1. 状态管理 #

首先定义一个状态变量来控制菜单的显示状态：

bool _showOverlay = false;
OverlayEntry? _overlayEntry;

2. 菜单显示/隐藏切换逻辑 #

写一个方法来动态添加或移除Overlay菜单：

void _toggleOverlay() {
  if (_showOverlay) {
    // 移除已显示的菜单
    _overlayEntry?.remove();
  } else {
    // 创建并插入新的Overlay菜单
    _overlayEntry = OverlayEntry(builder: (context) => _buildOverlayMenu());
    Overlay.of(context).insert(_overlayEntry!);
  }
  setState(() => _showOverlay = !_showOverlay);
}

3. 构建Overlay菜单UI #

菜单需要包含顶部栏、底部栏，以及全屏的半透明阴影遮罩，点击遮罩时关闭菜单：

Widget _buildOverlayMenu() {
  return GestureDetector(
    // 点击阴影区域关闭菜单
    onTap: _toggleOverlay,
    child: Container(
      color: Colors.black.withOpacity(0.5),
      child: Column(
        children: [
          // 顶部菜单
          Container(
            height: 60,
            color: Colors.white,
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: const [
                Text("顶部菜单"),
                Row(
                  children: [
                    Icon(Icons.share),
                    SizedBox(width: 16),
                    Icon(Icons.bookmark),
                  ],
                ),
              ],
            ),
          ),
          Expanded(
            // 中间区域允许点击透传到底层文本，避免拦截长按事件
            child: IgnorePointer(
              ignoring: true,
              child: Container(),
            ),
          ),
          // 底部菜单
          Container(
            height: 60,
            color: Colors.white,
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: const [
                Row(
                  children: [
                    Icon(Icons.copy),
                    SizedBox(width: 16),
                    Icon(Icons.select_all),
                  ],
                ),
                Text("底部菜单"),
              ],
            ),
          ),
        ],
      ),
    ),
  );
}

4. 处理中间文本的长按冲突 #

给中间文本单独设置手势，确保长按事件优先触发，同时点击文本也能切换菜单状态：

Widget _buildMainContent() {
  return GestureDetector(
    // 优先触发的长按事件
    onLongPress: () {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text("文本已触发长按")),
      );
    },
    // 点击文本切换菜单显示
    onTap: _toggleOverlay,
    child: const Padding(
      padding: EdgeInsets.all(24.0),
      child: Text(
        "这是中间的核心文本内容，点击屏幕任意位置可显示/隐藏菜单，长按我能触发专属的长按操作，不会和菜单逻辑冲突哦！",
        style: TextStyle(fontSize: 18, height: 1.5),
        textAlign: TextAlign.center,
      ),
    ),
  );
}

5. 完整的StatefulWidget示例 #

把所有部分整合起来，同时记得在页面销毁时清理Overlay，避免内存泄漏：

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

  @override
  State<OverlayMenuDemo> createState() => _OverlayMenuDemoState();
}

class _OverlayMenuDemoState extends State<OverlayMenuDemo> {
  bool _showOverlay = false;
  OverlayEntry? _overlayEntry;

  void _toggleOverlay() {
    if (_showOverlay) {
      _overlayEntry?.remove();
    } else {
      _overlayEntry = OverlayEntry(builder: (context) => _buildOverlayMenu());
      Overlay.of(context).insert(_overlayEntry!);
    }
    setState(() => _showOverlay = !_showOverlay);
  }

  Widget _buildOverlayMenu() {
    return GestureDetector(
      onTap: _toggleOverlay,
      child: Container(
        color: Colors.black.withOpacity(0.5),
        child: Column(
          children: [
            Container(
              height: 60,
              color: Colors.white,
              padding: const EdgeInsets.symmetric(horizontal: 16),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: const [
                  Text("顶部菜单"),
                  Row(
                    children: [Icon(Icons.share), SizedBox(width: 16), Icon(Icons.bookmark)],
                  ),
                ],
              ),
            ),
            Expanded(child: IgnorePointer(ignoring: true, child: Container())),
            Container(
              height: 60,
              color: Colors.white,
              padding: const EdgeInsets.symmetric(horizontal: 16),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: const [
                  Row(
                    children: [Icon(Icons.copy), SizedBox(width: 16), Icon(Icons.select_all)],
                  ),
                  Text("底部菜单"),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildMainContent() {
    return GestureDetector(
      onLongPress: () {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text("文本已触发长按")),
        );
      },
      onTap: _toggleOverlay,
      child: const Padding(
        padding: EdgeInsets.all(24.0),
        child: Text(
          "这是中间的核心文本内容，点击屏幕任意位置可显示/隐藏菜单，长按我能触发专属的长按操作，不会和菜单逻辑冲突哦！",
          style: TextStyle(fontSize: 18, height: 1.5),
          textAlign: TextAlign.center,
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Overlay菜单示例")),
      body: _buildMainContent(),
    );
  }

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

关键注意点 #

• 手势冲突处理：通过IgnorePointer让Overlay中间区域透传点击，确保底层文本的长按事件不会被拦截。
• Overlay生命周期：在页面dispose方法中移除OverlayEntry，避免内存泄漏。
• 交互体验：半透明阴影遮罩营造沉浸感，点击遮罩即可关闭菜单，符合用户直觉。

这样实现的效果就和你提到的Ayah应用一致了，点击屏幕显示顶部/底部菜单，点击阴影关闭，同时中间文本的长按功能完全不受影响~

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