Flutter：Persistent BottomNavigationBar与PopScope的返回导航异常问题

问题现象 #

• 底部导航栏能正常持久显示
• 安卓返回键在任意页面按下都会直接退出应用，而非按导航栈顺序返回（期望：SubPage2→SubPage1→MainPage）
• 手动点击返回按钮导航功能正常

问题根源 #

1. 根路由的PopScope拦截了所有pop行为：你在RootScaffold的初始路由/里给Mainpage套了canPop: false的PopScope，导致嵌套Navigator的根路由永远无法被pop。安卓返回键触发时，嵌套Navigator无法处理pop操作，系统就会直接触发应用退出。
2. 子页面不必要的PopScope：Subpage1和Subpage2里的PopScope属于冗余配置，默认的导航行为已经支持正常pop，额外的PopScope反而可能干扰系统返回逻辑。

修复方案 #

核心修改点 #

• 移除Mainpage外层的canPop: false的PopScope，改为在RootScaffold中通过嵌套Navigator的栈状态判断是否退出应用
• 持有嵌套Navigator的GlobalKey，用于获取当前栈的长度，判断是否需要退出应用
• 移除子页面中冗余的PopScope

完整代码示例 #

main.dart

import 'package:flutter/material.dart';
import 'mainpage.dart';

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

  @override
  State<RootScaffold> createState() => _RootScaffoldState();
}

class _RootScaffoldState extends State<RootScaffold> {
  final GlobalKey<NavigatorState> _navigatorKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    return PopScope(
      canPop: false,
      onPopInvoked: (didPop) async {
        if (_navigatorKey.currentState!.canPop()) {
          // 栈内有页面，正常执行pop
          _navigatorKey.currentState!.pop();
        } else {
          // 栈内只剩根路由，触发退出确认逻辑
          bool? exitApp = 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('确定'),
                ),
              ],
            ),
          );
          if (exitApp == true) {
            Navigator.of(context).pop();
          }
        }
      },
      child: Scaffold(
        body: Navigator(
          key: _navigatorKey,
          initialRoute: '/',
          onGenerateRoute: (settings) {
            Widget page;
            switch (settings.name) {
              case '/':
                page = const Mainpage();
                break;
              default:
                page = const Mainpage();
            }
            return MaterialPageRoute(
              builder: (context) => page,
              settings: settings,
            );
          },
        ),
        bottomNavigationBar: Container(
          width: double.infinity,
          height: 50,
          color: Colors.blue,
          child: const Center(
            child: Text('Persistent Bottom Bar'),
          ),
        ),
      ),
    );
  }
}

mainpage.dart

import 'package:flutter/material.dart';
import 'subpage1.dart';

class Mainpage extends StatelessWidget {
  const Mainpage({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Column(
        children: [
          const Text('Main Page'),
          ElevatedButton(
            onPressed: () {
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (context) => const Subpage1(),
                ),
              );
            },
            child: const Text('Navigate to Sub page 1'),
          ),
        ],
      ),
    );
  }
}

subpage1.dart（移除冗余PopScope）

import 'package:flutter/material.dart';
import 'subpage2.dart';

class Subpage1 extends StatelessWidget {
  const Subpage1({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Column(
        children: [
          Row(
            children: [
              IconButton(
                icon: const Icon(Icons.arrow_back),
                onPressed: () => Navigator.of(context).pop(),
              ),
              const Text('Sub Page 1'),
            ],
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (context) => const Subpage2(),
                ),
              );
            },
            child: const Text('Navigate to Sub page 2'),
          ),
        ],
      ),
    );
  }
}

subpage2.dart（移除冗余PopScope）

import 'package:flutter/material.dart';

class Subpage2 extends StatelessWidget {
  const Subpage2({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Column(
        children: [
          Row(
            children: [
              IconButton(
                icon: const Icon(Icons.arrow_back),
                onPressed: () => Navigator.of(context).pop(),
              ),
              const Text('Sub Page 2'),
            ],
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.of(context).popUntil((route) => route.isFirst);
            },
            child: const Text('Navigate to Main page'),
          ),
        ],
      ),
    );
  }
}

效果验证 #

• 底部导航栏保持全局持久显示
• 安卓返回键按SubPage2→SubPage1→MainPage顺序返回
• 在MainPage按下返回键时，会弹出退出确认对话框（可根据需求调整逻辑）

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