Flutter AutoTabsRouter嵌套导航页面跳转卡顿/残影问题求助

针对你使用auto_route: ^7.8.0时，从Main页面跳转到Page2出现动画卡顿、原页面残影的问题，以下是几个可行的修复方案：

方案1：移除外层Padding，移至子页面 #

你当前在BottomTabWrapper的Scaffold body中给路由容器加了全局Padding，这会干扰AutoRoute的过渡动画计算，导致旧页面的Padding区域在动画过程中残留。

修改BottomTabWrapper的body部分：

// 原代码
body: Padding(
    padding: const EdgeInsets.fromLTRB(20.0, 0.0, 20.0, 0.0),
    child: child),

// 修改后
body: child,

然后在需要Padding的子页面（Main、Page2、BottomTab2等）的根布局添加Padding：

@RoutePage()
class Main extends StatelessWidget {
  const Main({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(20.0, 0.0, 20.0, 0.0),
      child: // 你的页面内容
    );
  }
}

方案2：修正AutoTabsRouter的路由初始化方式 #

当前你用路由实例（BottomTab1()）初始化AutoTabsRouter，这不符合AutoRoute的最佳实践，可能导致上下文异常和性能问题。改为使用路由的page引用：

// 原代码
routes: const [BottomTab1(), BottomTab2()],

// 修改后
routes: const [BottomTab1.page, BottomTab2.page],

方案3：优化页面绘制性能 #

如果页面包含复杂组件，动画过程中频繁重建会导致卡顿：

• 给所有可复用的Widget添加const构造器，避免不必要的重建
• 用RepaintBoundary包裹复杂绘制的组件，隔离重绘区域
• 尝试显式指定过渡动画类型，比如：

context.router.navigate(const Page2(), transition: TransitionType.fade);

方案4：升级AutoRoute版本 #

检查auto_route的最新稳定版，7.8.0可能存在嵌套路由动画的已知bug，升级到最新版可能直接解决问题。

完整修改后的BottomTabWrapper示例 #

@RoutePage()
class BottomTabWrapper extends StatelessWidget {
  const BottomTabWrapper({super.key});

  @override
  Widget build(BuildContext context) {
    return AutoTabsRouter(
      routes: const [BottomTab1.page, BottomTab2.page],
      builder: (context, child) {
        final tabsRouter = AutoTabsRouter.of(context);
        return Scaffold(
          resizeToAvoidBottomInset: true,
          body: child,
          bottomNavigationBar: BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            currentIndex: tabsRouter.activeIndex,
            onTap: (index) {
              tabsRouter.setActiveIndex(index);
            },
            items: const [
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: 'tab1',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.receipt_long_rounded),
                label: 'tab2',
              ),
            ],
          ),
        );
      },
    );
  }
}

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