Flutter實戰(zhàn) 自定義路由切換動畫

#9.3 自定義路由切換動畫

我們在第二章“路由管理”一節(jié)中講過：Material 組件庫中提供了一個MaterialPageRoute組件，它可以使用和平臺風(fēng)格一致的路由切換動畫，如在 iOS 上會左右滑動切換，而在 Android 上會上下滑動切換?，F(xiàn)在，我們?nèi)绻?Android 上也想使用左右切換風(fēng)格，該怎么做？一個簡單的作法是可以直接使用CupertinoPageRoute，如：

 Navigator.push(context, CupertinoPageRoute(  
   builder: (context)=>PageB(),
 ));

CupertinoPageRoute是 Cupertino 組件庫提供的 iOS 風(fēng)格的路由切換組件，它實現(xiàn)的就是左右滑動切換。那么我們?nèi)绾蝸碜远x路由切換動畫呢？答案就是PageRouteBuilder。下面我們來看看如何使用PageRouteBuilder來自定義路由切換動畫。例如我們想以漸隱漸入動畫來實現(xiàn)路由過渡，實現(xiàn)代碼如下：

Navigator.push(
  context,
  PageRouteBuilder(
    transitionDuration: Duration(milliseconds: 500), //動畫時間為500毫秒
    pageBuilder: (BuildContext context, Animation animation,
        Animation secondaryAnimation) {
      return new FadeTransition(
        //使用漸隱漸入過渡,
        opacity: animation,
        child: PageB(), //路由B
      );
    },
  ),
);

我們可以看到pageBuilder 有一個animation參數(shù)，這是 Flutter 路由管理器提供的，在路由切換時pageBuilder在每個動畫幀都會被回調(diào)，因此我們可以通過animation對象來自定義過渡動畫。

無論是MaterialPageRoute、CupertinoPageRoute，還是PageRouteBuilder，它們都繼承自 PageRoute 類，而PageRouteBuilder其實只是PageRoute的一個包裝，我們可以直接繼承PageRoute類來實現(xiàn)自定義路由，上面的例子可以通過如下方式實現(xiàn)：

1. 定義一個路由類FadeRoute

   class FadeRoute extends PageRoute {
     FadeRoute({
       @required this.builder,
       this.transitionDuration = const Duration(milliseconds: 300),
       this.opaque = true,
       this.barrierDismissible = false,
       this.barrierColor,
       this.barrierLabel,
       this.maintainState = true,
     });

   
     final WidgetBuilder builder;

   
     @override
     final Duration transitionDuration;

   
     @override
     final bool opaque;

   
     @override
     final bool barrierDismissible;

   
     @override
     final Color barrierColor;

   
     @override
     final String barrierLabel;

   
     @override
     final bool maintainState;

   
     @override
     Widget buildPage(BuildContext context, Animation<double> animation,
         Animation<double> secondaryAnimation) => builder(context);

   
     @override
     Widget buildTransitions(BuildContext context, Animation<double> animation,
         Animation<double> secondaryAnimation, Widget child) {
        return FadeTransition( 
          opacity: animation,
          child: builder(context),
        );
     }
   }

1. 使用FadeRoute

   Navigator.push(context, FadeRoute(builder: (context) {
     return PageB();
   }));

雖然上面的兩種方法都可以實現(xiàn)自定義切換動畫，但實際使用時應(yīng)優(yōu)先考慮使用 PageRouteBuilder，這樣無需定義一個新的路由類，使用起來會比較方便。但是有些時候PageRouteBuilder是不能滿足需求的，例如在應(yīng)用過渡動畫時我們需要讀取當前路由的一些屬性，這時就只能通過繼承PageRoute的方式了，舉個例子，假如我們只想在打開新路由時應(yīng)用動畫，而在返回時不使用動畫，那么我們在構(gòu)建過渡動畫時就必須判斷當前路由isActive屬性是否為true，代碼如下：

@override
Widget buildTransitions(BuildContext context, Animation<double> animation,
    Animation<double> secondaryAnimation, Widget child) {
 //當前路由被激活，是打開新路由
 if(isActive) {
   return FadeTransition(
     opacity: animation,
     child: builder(context),
   );
 }else{
   //是返回，則不應(yīng)用過渡動畫
   return Padding(padding: EdgeInsets.zero);
 }
}

關(guān)于路由參數(shù)的詳細信息讀者可以自行查閱 API 文檔，比較簡單，不再贅述。