Flutter计算器应用弹出菜单选择后路由跳转无响应问题咨询

问题根因 #

你的弹出菜单路由跳转失效是两个核心问题共同导致的：

1. PopupMenuItem 的 onTap 回调执行时机过早：触发 onTap 时弹出菜单本身的路由还在执行 pop 退场逻辑，此时你用的 context 属于弹出菜单的临时上下文，无法正确关联到顶层 MaterialApp 注册的路由表，所以跳转无响应。
2. 逻辑混用冲突：你同时给 PopupMenuButton 配置了 onSelected 回调，又给每个菜单项单独配置 onTap，且前两个菜单项的 value 属性被注释，就算走 onSelected 逻辑也拿不到正确的触发值。

修复方案 #

推荐优先用第一种方案，逻辑更简洁统一：

方案1：统一走 PopupMenuButton 的 onSelected 处理跳转 #

移除所有 PopupMenuItem 单独的 onTap 回调，补全所有菜单项的 value 为对应的路由名，跳转逻辑统一放在 onSelected 中执行：

Widget buildMenuButton(buttonMargin, String buttonClass, String buttonText, textStyle, buttonDecoration) {
    return Container(
      margin: buttonMargin,
      child: PopupMenuButton(
        icon: Icon(Icons.more_horiz),
        onSelected: (value) {
          // 不需要多余的setState，除非你需要存储当前选中的计算器类型
          Navigator.pushNamed(context, value as String);
          // 如果不需要叠加页面栈，可替换为 pushReplacementNamed
          // Navigator.pushReplacementNamed(context, value as String);
        },
        itemBuilder: (context) => [
          PopupMenuItem(
            child: Text("Prime Factor"),
            value: '/prime',
          ),
          PopupMenuItem(
            child: Text("Basic"),
            value: '/basic',
          ),
          PopupMenuItem(
            child: Text("Scientific"),
            value: '/scientific',
          ),
        ],
      ),
      decoration: buttonDecoration,
    );
 }

方案2：保留单菜单项onTap的延迟处理 #

如果你一定要保留每个菜单项单独的 onTap 配置，需要等待弹出菜单退场完成后再执行跳转：

PopupMenuItem(
  child: Text("Prime Factor"),
  onTap: () {
    // 等待当前帧渲染完成（菜单退场完毕）再执行跳转
    WidgetsBinding.instance.addPostFrameCallback((_) {
      Navigator.pushNamed(context, '/prime');
    });
  },
)

额外注意事项 #

如果你的 buildMenuButton 是封装在独立的工具类中，需要把当前页面的 BuildContext 作为参数显式传入方法，避免用到不在 MaterialApp 路由树下的无效上下文。

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