Flutter使用auto_route包时如何让TabPage切换标签时重新执行build方法

默认auto_route的Tab导航默认开启了页面状态保持，切换Tab时不会销毁原有页面实例，因此不会触发build方法执行，你定义的页面入场动画也就无法重复触发。你可以根据需求选择以下两种方案实现效果：

方案一：关闭Tab状态保持，切换时完全重建页面 #

这个方案直接满足「切换标签不保存原有堆栈、每次触发build执行」的需求，实现成本最低：

核心原理是配置AutoTabsRouter销毁切换后的Tab页面，每次切入时重新初始化页面实例

配置示例：

AutoTabsRouter(
  // 3.x 及以上版本改为 keepState: false
  keepHistory: false,
  // 关闭懒加载，首次加载就初始化所有Tab（可选配置，按需开启）
  lazyLoad: false,
  routes: const [
    HomeTabRoute(),
    CategoryTabRoute(),
    ProfileTabRoute(),
  ],
  builder: (context, child, animation) {
    final tabsRouter = AutoTabsRouter.of(context);
    return Scaffold(
      body: child,
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: tabsRouter.activeIndex,
        onTap: tabsRouter.setActiveIndex,
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.list), label: '分类'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
        ],
      ),
    );
  },
)

配置完成后，每次切换Tab都会销毁旧页面、重建新切入的页面，build方法会完整执行，你定义在build中的动画会正常触发。

方案二：保留页面状态，仅切换时手动触发动画 #

如果不想因为重建页面丢失用户输入、滚动位置等状态，可以通过路由生命周期监听手动触发动画，不需要重建整个页面：

1. 首先在全局路由配置中注册路由观察者

final AutoRouteObserver routeObserver = AutoRouteObserver();

MaterialApp.router(
  routerDelegate: AutoRouterDelegate(
    AppRouter(),
    navigatorObservers: () => [routeObserver],
  ),
  // 其余配置项
)

2. 在Tab页的State中监听路由激活事件，触发动画

class _HomePageState extends State<HomePage> with AutoRouteAware {
  late AnimationController _animationController;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 注册当前页面的路由监听
    routeObserver.subscribe(this, context.routeData);
    // 动画控制器初始化逻辑
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 500),
    );
  }

  // 切换回当前Tab时触发
  @override
  void didPopNext() {
    super.didPopNext();
    // 重置并播放动画
    _animationController.reset();
    _animationController.forward();
  }

  @override
  void dispose() {
    // 取消监听，释放资源
    routeObserver.unsubscribe(this);
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 页面布局逻辑，动画绑定到_animationController即可
  }
}

该方案不会销毁页面原有状态，仅在Tab激活时触发动画执行，性能损耗更低

内容的提问来源于stack exchange，提问作者Осипов Олег