Flutter Web如何实现头部悬停显示popup menu、鼠标移出自动关闭功能

可以实现，以下是基于Flutter原生组件的无依赖实现方案，完全适配Web端鼠标悬停交互逻辑：

基础实现方案 #

核心思路是通过MouseRegion监听鼠标进出事件，手动控制PopupMenuButton的展开/关闭状态，替代默认的点击触发逻辑：

1. 首先定义状态变量与菜单控制器

final GlobalKey<PopupMenuButtonState> _menuKey = GlobalKey();
bool _isMenuOpen = false;

2. 组装交互组件

MouseRegion(
  // 鼠标进入触发区域时展开菜单
  onEnter: (_) {
    if (!_isMenuOpen) {
      _menuKey.currentState?.showButtonMenu();
      _isMenuOpen = true;
    }
  },
  // 鼠标离开触发区域时关闭菜单
  onExit: (_) {
    if (_isMenuOpen) {
      Navigator.pop(context);
      _isMenuOpen = false;
    }
  },
  child: PopupMenuButton<int>(
    key: _menuKey,
    onSelected: (value) {
      _isMenuOpen = false;
      // 此处添加菜单选项的点击处理逻辑
    },
    onCanceled: () {
      // 点击空白处关闭菜单时同步状态
      _isMenuOpen = false;
    },
    // 头部触发区域的自定义样式
    child: const Padding(
      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: Text('头部导航菜单'),
    ),
    itemBuilder: (context) => [
      const PopupMenuItem(value: 1, child: Text('菜单选项1')),
      const PopupMenuItem(value: 2, child: Text('菜单选项2')),
      const PopupMenuItem(value: 3, child: Text('菜单选项3')),
    ],
  ),
)

优化方案：兼容菜单区域悬停 #

基础实现中鼠标移出触发按钮就会关闭菜单，无法点击菜单选项，可以通过增加延迟关闭计时器优化，实现鼠标从触发按钮移到菜单上时不关闭：

1. 新增计时器变量

Timer? _closeTimer;

2. 修改MouseRegion的进出逻辑与菜单选项配置

MouseRegion(
  onEnter: (_) {
    _closeTimer?.cancel();
    if (!_isMenuOpen) {
      _menuKey.currentState?.showButtonMenu();
      _isMenuOpen = true;
    }
  },
  onExit: (_) {
    // 延迟200ms关闭，给鼠标移到菜单上的缓冲时间
    _closeTimer = Timer(const Duration(milliseconds: 200), () {
      if (_isMenuOpen) {
        Navigator.pop(context);
        _isMenuOpen = false;
      }
    });
  },
  child: PopupMenuButton<int>(
    key: _menuKey,
    onSelected: (value) {
      _closeTimer?.cancel();
      _isMenuOpen = false;
      // 菜单选项点击处理
    },
    onCanceled: () {
      _closeTimer?.cancel();
      _isMenuOpen = false;
    },
    child: const Padding(
      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: Text('头部导航菜单'),
    ),
    // 给每个菜单选项加鼠标监听，移入时取消关闭计时器
    itemBuilder: (context) => [
      PopupMenuItem(
        value: 1,
        child: MouseRegion(
          onEnter: (_) => _closeTimer?.cancel(),
          onExit: (_) {
            _closeTimer = Timer(const Duration(milliseconds: 200), () {
              Navigator.pop(context);
              _isMenuOpen = false;
            });
          },
          child: const Text('菜单选项1'),
        ),
      ),
      PopupMenuItem(
        value: 2,
        child: MouseRegion(
          onEnter: (_) => _closeTimer?.cancel(),
          onExit: (_) {
            _closeTimer = Timer(const Duration(milliseconds: 200), () {
              Navigator.pop(context);
              _isMenuOpen = false;
            });
          },
          child: const Text('菜单选项2'),
        ),
      ),
    ],
  ),
)

以上两种方案均不需要引入第三方依赖，直接在Flutter Web环境运行即可生效。

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