Flutter使用auto_route时，跳转多路由如何保留底部导航栏？

你遇到的问题核心是：直接用AutoRouter.of(context).push会使用根导航器跳转，把整个AutoTabsScaffold所在的路由栈顶替换掉，导致底部导航栏消失。正确的做法是在当前标签页的子导航栈内push新页面，这样AutoTabsScaffold会一直保留在栈底，底部导航栏也就不会消失。

具体实现步骤：

1. 调整路由配置，将目标页面设为标签页的子路由 #

确保你要在标签页内打开的页面，是对应标签页路由的子路由。比如你的三个标签页是HomeTab、DiscoverTab、ProfileTab，把需要保留导航栏的页面（比如DetailPage）挂在对应标签页的children下：

@MaterialAutoRouter(
  routes: [
    AutoRoute(
      path: '/',
      page: AutoTabsScaffold,
      children: [
        AutoRoute(
          path: 'home',
          page: HomeTab,
          children: [
            // 把DetailPage设为HomeTab的子路由
            AutoRoute(path: 'detail/:itemId', page: DetailPage),
          ],
        ),
        AutoRoute(path: 'discover', page: DiscoverTab),
        AutoRoute(path: 'profile', page: ProfileTab),
      ],
    ),
  ],
)
class $AppRouter {}

2. 使用标签页的子导航器跳转页面 #

在标签页内部跳转时，不要用全局的根导航器，而是获取当前标签页的子导航器来push：

方式一：使用代码生成的路由类（推荐） #

auto_route会为每个路由生成对应的Route类，直接用context.pushRoute即可（底层会自动使用当前子导航器）：

// 在HomeTab的某个Widget里触发跳转
ElevatedButton(
  onPressed: () {
    context.pushRoute(DetailPageRoute(itemId: '123'));
  },
  child: const Text('打开详情页'),
)

方式二：手动指定子导航器 #

如果需要更灵活控制，可以显式指定rootNavigator: false来获取子导航器：

AutoRouter.of(context, rootNavigator: false)
    .pushNamed('/home/detail/123');

3. 页面返回与特殊场景处理 #

• 返回子页面：直接用context.pop()或者AutoRouter.of(context).pop()即可，底部导航栏会保持显示。
• 全屏页面（不需要导航栏）：如果某些页面需要隐藏底部导航栏，跳转时指定rootNavigator: true，这样会用根导航器跳转，替换整个栈顶：

context.pushRoute(FullScreenPageRoute(), rootNavigator: true);

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