Flutter Web中用Auto Route实现无全局动画的嵌套导航布局

核心思路 #

把右侧内容区域单独作为嵌套导航容器，让路由切换仅在该容器内生效，避免触发全局页面动画。

具体实现步骤 #

1. 定义嵌套路由结构 #

在路由配置文件中，给包含左侧菜单和右侧容器的主页面添加子路由，子路由对应右侧各内容页面：

@MaterialAutoRouter(
  routes: [
    AutoRoute(
      path: '/',
      page: MainLayoutPage, // 左侧菜单+右侧容器的主页面
      children: [
        AutoRoute(path: 'tags', page: TagsPage),
        AutoRoute(path: 'questions', page: QuestionsPage),
        AutoRoute(path: 'users', page: UsersPage),
        // 其他右侧内容页面
      ],
    ),
  ],
)
class $AppRouter {}

2. 在主布局中添加嵌套导航容器 #

在MainLayoutPage的右侧区域，使用AutoRouter组件并指定专属navigatorKey，确保路由切换局限在该容器内：

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          // 左侧菜单列表
          Container(
            width: 200,
            color: Colors.grey[100],
            child: ListView(
              children: [
                ListTile(
                  title: const Text('标签'),
                  onTap: () => context.pushRoute(const TagsRoute()),
                ),
                ListTile(
                  title: const Text('问题'),
                  onTap: () => context.pushRoute(const QuestionsRoute()),
                ),
                ListTile(
                  title: const Text('用户'),
                  onTap: () => context.pushRoute(const UsersRoute()),
                ),
              ],
            ),
          ),
          // 右侧嵌套导航容器
          Expanded(
            child: AutoRouter(
              navigatorKey: context.read<AppRouter>().nestedKey(1),
              // 直接返回子组件，禁用全局动画
              transitionBuilder: (context, animation, secondaryAnimation, child) => child,
            ),
          ),
        ],
      ),
    );
  }
}

3. 自定义局部动画（可选） #

如果需要右侧内容切换时有局部动画，可在transitionBuilder中单独配置，比如淡入淡出：

transitionBuilder: (context, animation, secondaryAnimation, child) {
  return FadeTransition(
    opacity: animation,
    child: child,
  );
},

4. 设置默认加载页面 #

在主路由的子路由中指定初始页面，确保打开应用时默认展示右侧第一个内容页：

AutoRoute(
  path: '/',
  page: MainLayoutPage,
  children: [
    AutoRoute(path: 'tags', page: TagsPage, initial: true),
    // ...其他子路由
  ],
),

关键注意点 #

• 嵌套导航的navigatorKey要对应正确的路由层级，nestedKey(1)表示第一个子导航层级，需根据实际路由结构调整数字。
• 必须使用AutoRoute提供的context.pushRoute方法触发导航，避免调用全局导航方法导致全局动画。

内容的提问来源于stack exchange，提问作者Kiều Phong