Flutter路由跳转：使用MaterialPageRoute时前置页面builder重复执行

嘿，这个问题我之前帮人排查过好几次，本质是你的路由页面的MaterialPageRoute的builder函数被意外触发了连锁重建——每跳一页，前面所有页面的builder都跟着执行一遍，这明显不符合预期对吧？

为啥会出现这种连锁重建？ #

我总结了几个最常见的原因：

• 路由builder依赖了不稳定的对象/函数：比如你每次调用Navigator.push时，都在里面新建一个匿名的builder函数，或者builder里引用了父组件中每次重建都会重新生成的变量（比如没有用const修饰的回调、临时变量）。Flutter会把builder当作路由的依赖项，一旦这个依赖变了，就会重新执行builder，甚至触发上层路由的重建。
• Navigator的父组件被不必要地重建：比如你把MaterialApp或者Navigator放在了一个会频繁调用setState的widget里，导致整个路由栈的上下文被刷新，所有页面的builder都会被连带触发。
• 页面widget没有用const构造函数：如果你的Page1、Page2这些页面的构造函数不是const的，每次builder执行时都会创建新的页面实例，而且如果父组件重建，这些页面也会跟着重建，进而可能触发连锁反应。

怎么解决？ #

针对上面的原因，给你几个具体的修复步骤：

1. 用const构造函数+路由表缓存builder
   不要每次跳转都临时创建MaterialPageRoute，而是提前定义路由表，并且给页面加上const构造函数：

   // 全局路由表
   Route<dynamic> generateRoute(RouteSettings settings) {
     switch (settings.name) {
       case '/page1':
         return MaterialPageRoute(builder: (_) => const Page1());
       case '/page2':
         return MaterialPageRoute(builder: (_) => const Page2());
       case '/page3':
         return MaterialPageRoute(builder: (_) => const Page3());
       case '/page4':
         return MaterialPageRoute(builder: (_) => const Page4());
       default:
         return MaterialPageRoute(builder: (_) => const Page1());
     }
   }
   
   // 页面组件的const构造函数
   class Page2 extends StatelessWidget {
     const Page2({super.key}); // 必须是const构造函数
     
     @override
     Widget build(BuildContext context) {
       return Scaffold(/* ... */);
     }
   }
   

   这样路由的builder不会频繁变化，页面实例也会被缓存，不会重复创建。

2. 确保Navigator/MaterialApp是稳定的根组件
   把MaterialApp作为runApp的直接参数，不要把它放在会频繁setState的widget里面：

   void main() {
     runApp(const MyApp());
   }
   
   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         onGenerateRoute: generateRoute, // 使用上面定义的路由表
         initialRoute: '/page1',
       );
     }
   }
   

   如果必须在某个子widget里使用Navigator，给这个widget加上AutomaticKeepAliveClientMixin来防止不必要的重建：

   class CustomNavigator extends StatefulWidget {
     const CustomNavigator({super.key});
   
     @override
     State<CustomNavigator> createState() => _CustomNavigatorState();
   }
   
   class _CustomNavigatorState extends State<CustomNavigator> with AutomaticKeepAliveClientMixin {
     @override
     bool get wantKeepAlive => true; // 保持状态不被销毁重建
   
     @override
     Widget build(BuildContext context) {
       super.build(context); // 必须调用这行
       return Navigator(
         initialRoute: '/page1',
         onGenerateRoute: generateRoute,
       );
     }
   }
   

3. 用路由参数传递数据，避免依赖父组件状态
   不要在builder里直接引用父组件的状态变量，而是通过settings.arguments传递数据：

   // 跳转时传参
   Navigator.pushNamed(context, '/page2', arguments: {'data': 'hello from page1'});
   
   // 在Page2里获取参数
   @override
   Widget build(BuildContext context) {
     final args = ModalRoute.of(context)?.settings.arguments as Map<String, String>;
     return Scaffold(
       body: Text(args['data']!),
     );
   }
   

   这样builder不会依赖父组件的状态，父组件重建时也不会触发路由builder的执行。

额外排查技巧 #

如果还是找不到问题，可以在每个页面的build函数里打印调用栈，看看是谁触发了重建：

@override
Widget build(BuildContext context) {
  print('${runtimeType} build triggered! Stack: ${StackTrace.current}');
  return Scaffold(/* ... */);
}

通过调用栈就能定位到是哪个组件的重建导致了连锁反应。

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