Flutter中如何一次性dismiss多个页面并实现指定转场效果？

实现思路 #

对应iOS中dismiss(animated:)带动画关闭整个导航栈的逻辑，在Flutter里可以把页面B、C封装成独立的子导航栈，从A跳转时给子栈加上「下到上」的入场动画，关闭子栈时自动触发反向的「上到下」退场动画，完美匹配需求。

具体代码实现 #

1. 页面A跳转到子导航栈（包含B）
   给子导航栈设置自定义入场动画，模拟iOS present的下到上效果：

   Navigator.push(
     context,
     PageRouteBuilder(
       pageBuilder: (context, animation, secondaryAnimation) => Navigator(
         initialRoute: '/pageB',
         onGenerateRoute: (settings) {
           if (settings.name == '/pageB') {
             return MaterialPageRoute(builder: (_) => PageB());
           } else if (settings.name == '/pageC') {
             return MaterialPageRoute(builder: (_) => PageC());
           }
           return null;
         },
       ),
       transitionsBuilder: (context, animation, secondaryAnimation, child) {
         // 下到上的滑入动画
         const begin = Offset(0.0, 1.0);
         const end = Offset.zero;
         const curve = Curves.easeInOut;
         var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
         return SlideTransition(
           position: animation.drive(tween),
           child: child,
         );
       },
     ),
   );
   

2. 页面B跳转到页面C
   用默认的左滑转场即可，和原生导航逻辑一致：

   Navigator.pushNamed(context, '/pageC');
   

3. 页面C返回页面A
   直接关闭最外层的子导航栈，自动触发反向的「上到下」退场动画：

   Navigator.of(context, rootNavigator: true).pop();
   

补充说明 #

如果不想用子导航栈，也可以通过自定义路由的pop动画配合popUntil实现，但子导航栈的方式更贴合iOS开发者的思维习惯，代码逻辑也更清晰，能避免处理多个页面的转场冲突。

内容的提问来源于stack exchange，提问作者Emotionless bug writer