如何使用Navigator API检测基础路由？实现返回退出提示功能

要检测当前是否处于基础路由，核心是利用Navigator的canPop()方法——它会返回一个异步结果（比如Flutter里的Future<bool>），如果返回false，说明当前路由是导航栈的最底层，也就是你说的基础路由。结合这个判断，再拦截返回键事件，就能实现“回到基础路由后按返回键弹出确认关闭提示”的效果。

下面是具体的实现步骤和代码示例（以Flutter为例，Navigator API的核心逻辑通用）：

1. 用WillPopScope拦截返回事件 #

把你的基础路由页面用WillPopScope包裹，它能监听系统返回键或Navigator的pop操作：

@override
Widget build(BuildContext context) {
  return WillPopScope(
    onWillPop: () async {
      // 判断是否能返回上一页
      bool canPop = await Navigator.of(context).canPop();
      if (canPop) {
        // 不是基础路由，正常返回
        return true;
      } else {
        // 是基础路由，弹出确认弹窗
        return await showDialog(
          context: context,
          builder: (context) => AlertDialog(
            title: const Text('提示'),
            content: const Text('确定要退出应用吗？'),
            actions: [
              TextButton(
                onPressed: () => Navigator.of(context).pop(false),
                child: const Text('取消'),
              ),
              TextButton(
                onPressed: () => Navigator.of(context).pop(true),
                child: const Text('确定'),
              ),
            ],
          ),
        ) ?? false; // 处理弹窗被外部关闭的情况
      }
    },
    child: Scaffold(
      appBar: AppBar(title: const Text('基础路由')),
      body: const Center(child: Text('这是基础路由页面')),
    ),
  );
}

2. 核心逻辑解释 #

• Navigator.of(context).canPop()：检查当前导航栈中是否存在上一个路由。如果不存在（返回false），说明当前就是基础路由。
• onWillPop回调返回true时，允许执行返回操作；返回false时，阻止返回。在基础路由场景下，我们通过弹窗让用户选择是否允许退出。

额外说明 #

• 如果你在其他框架（比如React Native）中使用Navigator API，核心思路一致：先判断当前路由是否为栈底，再拦截返回事件并弹出提示。
• 确保使用的context是当前路由的上下文，避免因层级问题导致canPop()判断出错。

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