Flutter如何阻止子Listener触发父Listener的右键菜单事件

问题原因 #

Flutter 指针事件默认采用冒泡传递机制：子组件接收到指针事件后，如果没有主动拦截，事件会继续向上传递给所有父级的事件监听组件。当前实现中父子组件都监听了右键按下事件，因此点击子组件时两个监听回调同时被触发，弹出两级菜单。

解决方案 #

在子组件的onPointerDown回调中，处理完右键逻辑后调用event.stopPropagation()方法，主动拦截事件向上传递，父组件就不会收到该右键事件，也就不会弹出父级菜单。

修改后的完整代码 #

Listener(
  onPointerDown: (event) {
    if (event.buttons == 2) {
      double dy = event.position.dy.ceilToDouble();
      double dx = event.position.dx.ceilToDouble();
      showMenu(
        context: context,
        position: RelativeRect.fromLTRB(dx, dy, dx, 0),
        items: [
          PopupMenuItem(child: const Text("Parent Menu 1"), onTap: () {}),
        ],
      );
    }
  },
  child: ExpansionTile(
    initiallyExpanded: true,
    iconColor: Colors.white,
    leading: const Icon(Icons.book),
    title: const Text(
      "Note",
      style: TextStyle(fontSize: 16.0, color: Colors.white),
    ),
    children: <Widget>[
      Listener(
        onPointerDown: (event) {
          if (event.buttons == 2) {
            // 核心修改：阻止事件向上冒泡
            event.stopPropagation();
            double dy = event.position.dy.ceilToDouble();
            double dx = event.position.dx.ceilToDouble();
            showMenu(
              context: context,
              position: RelativeRect.fromLTRB(dx, dy, dx, 0),
              items: [
                PopupMenuItem(child: const Text("Child Menu 1"), onTap: () {}),
                PopupMenuItem(child: const Text("Child Menu 2"), onTap: () {}),
              ],
            );
          }
        },
        child: ListTile(
          title: Text(
            formatTitle(),
            style: TextStyle(color: Colors.white, fontSize: fontSize ?? 14.0),
          ),
          dense: true,
          onTap: () {},
        ),
      )
    ],
  ),
)

补充说明 #

• 该方案兼容全平台Flutter应用，不限制Linux桌面端场景
• 无需修改父组件逻辑，仅需在需要拦截事件的子组件回调中添加拦截代码即可
• 如果有多层嵌套的右键菜单，每层的子组件按需添加事件拦截即可实现分层触发效果

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