如何在导航到新页面时保留BottomNavigationBar与AppBar，且返回时保存页面状态？

方式1：嵌套导航器（Nested Navigator，适配需要路由跳转动画的场景） #

这是原生支持的最优解，核心逻辑是把页面路由栈嵌套在全局BottomNavigationBar和AppBar的下层，导航操作仅触发下层路由切换，上层公共导航组件不会被替换。

• 首先在Scaffold的body属性中嵌套独立Navigator，绑定唯一GlobalKey标识路由栈：

final GlobalKey<NavigatorState> _nestedNavKey = GlobalKey<NavigatorState>();

@override
Widget build(BuildContext context) {
  return Scaffold(
    // 全局固定的AppBar，不会被路由操作替换
    appBar: AppBar(title: Text("全局导航栏"),),
    body: Navigator(
      key: _nestedNavKey,
      initialRoute: "/home",
      onGenerateRoute: (settings) {
        Widget page;
        switch(settings.name) {
          case "/home":
            page = HomePage();
            break;
          case "/second":
            page = SecondPage();
            break;
          default:
            page = HomePage();
        }
        return PageRouteBuilder(
          pageBuilder: (_, __, ___) => page,
          settings: settings,
        );
      },
    ),
    // 全局固定的BottomNavigationBar
    bottomNavigationBar: BottomNavigationBar(
      // 你的底部导航配置项
    ),
  );
}

• 跳转到新页面时，调用嵌套导航器的push方法，禁止使用根导航器：
  _nestedNavKey.currentState?.pushNamed("/second");
• 返回时直接调用Navigator.pop(context)即可，原页面未被销毁，状态会完整保留。

如果你需要给每个底部导航Tab维护独立的路由栈，给每个Tab分配独立的嵌套Navigator和对应key，切换Tab时仅替换显示对应的Navigator即可。

方式2：PageView + Offstage组合（适配Tab切换场景） #

如果你的新页面是平级Tab页，不需要路由跳转动画，用这个方案状态留存更简单：

• 所有需要保留状态的页面加入PageView的children列表，页面State混入AutomaticKeepAliveClientMixin开启保活：

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true; // 开启状态保活开关

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用父类方法
    // 你的页面布局代码
  }
}

• 切换页面时仅更新PageView的currentIndex，或者用Offstage控制页面显隐即可，页面不会被重建，上层公共导航组件也不会被替换。

通用注意事项 #

• 不要直接调用根导航器的Navigator.of(context).push方法，该操作会把整个Scaffold推入路由栈，必然会覆盖原有的公共导航组件。
• 如果需要动态修改AppBar内容，可以在子页面切换时通过状态管理组件（Provider、Bloc等）更新AppBar的属性，不需要替换整个AppBar组件。
• 其他前端/跨端框架的实现思路是通用的：不要替换承载公共导航组件的父容器，仅切换父容器内部的子页面内容，同时对子页面做状态缓存即可。

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