我们在第二章“路由管理”一节中讲过：Material组件库中提供了一个MaterialPageRoute组件，它可以使用和平台风格一致的路由切换动画，如在iOS上会左右滑动切换，而在Android上会上下滑动切换

我们如果在Android上也想使用左右切换风格，该怎么做？一个简单的作法是可以直接使用CupertinoPageRoute，如：

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

CupertinoPageRoute是Cupertino组件库提供的iOS风格的路由切换组件，它实现的就是左右滑动切换。那么我们如何来自定义路由切换动画呢？答案就是PageRouteBuilder。下面我们来看看如何使用PageRouteBuilder来自定义路由切换动画。例如我们想以渐隐渐入动画来实现路由过渡，实现代码如下：

  1. import 'package:flutter/cupertino.dart';
  2. import 'package:flutter/material.dart';
  4. void main() => runApp(MyApp());
  6. class MyApp extends StatelessWidget {
  7.   @override
  8.   Widget build(BuildContext context) {
  9.     return MaterialApp(
  10.         title: '路由动画',
  11.         theme: new ThemeData(
  12.           primarySwatch: Colors.blue,
  13.         ),
  14.         home: FirstPage());
  15.   }
  16. }
  18. class FirstPage extends StatelessWidget {
  19.   @override
  20.   Widget build(BuildContext context) {
  21.     return Scaffold(
  22.         backgroundColor: Colors.blue,
  23.         appBar: AppBar(
  24.           title: Text('FirstPage', style: TextStyle(fontSize: 36.0)),
  25.           elevation: 0.0,
  26.         ),
  27.         body: Center(
  28.           child: MaterialButton(
  29.             child: Icon(
  30.               Icons.navigate_next,
  31.               color: Colors.white,
  32.               size: 64.0,
  33.             ),
  34.             onPressed: () {
  35.               // Navigator.of(context).push(CustomRoute(SecondPage()));
  36.               Navigator.push(
  37.                   context,
  38.                   // //Andorid的上下滑动
  39.                   // MaterialPageRoute(
  40.                   //   builder: (BuildContext context) => SecondPage(),
  41.                   // ));
  43.                   // // ios的左右滑动
  44.                   // CupertinoPageRoute(
  45.                   //   builder: (context) => SecondPage(),
  46.                   // ));
  48.                   // //自定义路由动画
  49.                   CustomRoute(
  50.                     SecondPage(),
  51.                   ));
  52.             },
  53.           ),
  54.         ));
  55.   }
  56. }
  58. class CustomRoute extends PageRouteBuilder {
  59.   final Widget widget;
  60.   CustomRoute(this.widget)
  61.       : super(
  62.           transitionDuration: const Duration(seconds: 1),
  63.           pageBuilder: (BuildContext context, Animation<double> animation1,
  64.               Animation<double> animation2) {
  65.             return ScaleTransition(
  66.                 scale: Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
  67.                     parent: animation1, curve: Curves.fastOutSlowIn)),
  68.                 child: widget);
  69.           },
  70.         );
  71. }
  73. class SecondPage extends StatelessWidget {
  74.   @override
  75.   Widget build(BuildContext context) {
  76.     return Scaffold(
  77.         backgroundColor: Colors.pinkAccent,
  78.         appBar: AppBar(
  79.           title: Text(
  80.             'SecondPage',
  81.             style: TextStyle(fontSize: 36.0),
  82.           ),
  83.           backgroundColor: Colors.pinkAccent,
  84.           leading: Container(),
  85.           elevation: 0.0,
  86.         ),
  87.         body: Center(
  88.           child: MaterialButton(
  89.             child: Icon(Icons.navigate_before, color: Colors.white, size: 64.0),
  90.             onPressed: () => Navigator.of(context).pop(),
  91.           ),
  92.         ));
  93.   }
  94. }

我们可以看到pageBuilder 有一个animation参数，这是Flutter路由管理器提供的，在路由切换时pageBuilder在每个动画帧都会被回调，因此我们可以通过animation对象来自定义过渡动画。

使用PageRoute定制路由

无论是MaterialPageRouteCupertinoPageRoute还是PageRouteBuilder，它们都继承自PageRoute类，而PageRouteBuilder其实只是PageRoute的一个包装，我们可以直接继承PageRoute类来实现自定义路由，上面的例子可以通过如下方式实现：

  1. 查看PageRouteBuilder源码 ```dart Widget _defaultTransitionsBuilder(BuildContext context, Animation animation, Animation secondaryAnimation, Widget child) { return child; } class PageRouteBuilder extends PageRoute { PageRouteBuilder({ RouteSettings settings, @required this.pageBuilder, this.transitionsBuilder = _defaultTransitionsBuilder, this.transitionDuration = const Duration(milliseconds: 300), this.opaque = true, this.barrierDismissible = false, this.barrierColor, this.barrierLabel, this.maintainState = true, bool fullscreenDialog = false, }) : assert(pageBuilder != null),

    1. assert(transitionsBuilder != null),
    2. assert(opaque != null),
    3. assert(barrierDismissible != null),
    4. assert(maintainState != null),
    5. assert(fullscreenDialog != null),
    6. super(settings: settings, fullscreenDialog: fullscreenDialog);

    final RoutePageBuilder pageBuilder;

final RouteTransitionsBuilder transitionsBuilder;

@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 animation, Animation secondaryAnimation) { return pageBuilder(context, animation, secondaryAnimation); }

@override Widget buildTransitions(BuildContext context, Animation animation, Animation secondaryAnimation, Widget child) { return transitionsBuilder(context, animation, secondaryAnimation, child); } }

  2. 2. 定义一个路由类FadeRoute
  3. ```dart
  4. class FadeRoute extends PageRoute {
  5.   FadeRoute({
  6.     @required this.builder,
  7.     this.transitionDuration = const Duration(milliseconds: 300),
  8.     this.opaque = true,
  9.     this.barrierDismissible = false,
  10.     this.barrierColor,
  11.     this.barrierLabel,
  12.     this.maintainState = true,
  13.   });
  14.   final WidgetBuilder builder;
  15.   @override
  16.   final Duration transitionDuration;
  17.   @override
  18.   final bool opaque;
  19.   @override
  20.   final bool barrierDismissible;
  21.   @override
  22.   final Color barrierColor;
  23.   @override
  24.   final String barrierLabel;
  25.   @override
  26.   final bool maintainState;
  27.   @override
  28.   Widget buildPage(BuildContext context, Animation<double> animation,
  29.       Animation<double> secondaryAnimation) => builder(context);
  30.   @override
  31.   Widget buildTransitions(BuildContext context, Animation<double> animation,
  32.       Animation<double> secondaryAnimation, Widget child) {
  33.      return FadeTransition( 
  34.        opacity: animation,
  35.        child: builder(context),
  36.      );
  37.   }
  38. }
  1. 使用FadeRoute ```dart import ‘package:flutter/cupertino.dart’; import ‘package:flutter/material.dart’;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: ‘路由动画’, theme: new ThemeData( primarySwatch: Colors.blue, ), home: FirstPage()); } }

class FirstPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.blue, appBar: AppBar( title: Text(‘FirstPage’, style: TextStyle(fontSize: 36.0)), elevation: 0.0, ), body: Center( child: MaterialButton( child: Icon( Icons.navigate_next, color: Colors.white, size: 64.0, ), onPressed: () { //使用FadeRoute Navigator.push(context, FadeRoute( builder: (BuildContext context) { return SecondPage(); }, )); }, ), )); } }

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 animation, Animation secondaryAnimation) => builder(context); @override Widget buildTransitions(BuildContext context, Animation animation, Animation secondaryAnimation, Widget child) { return FadeTransition( opacity: animation, child: builder(context), ); } }

class SecondPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.pinkAccent, appBar: AppBar( title: Text( ‘SecondPage’, style: TextStyle(fontSize: 36.0), ), backgroundColor: Colors.pinkAccent, leading: Container(), elevation: 0.0, ), body: Center( child: MaterialButton( child: Icon(Icons.navigate_before, color: Colors.white, size: 64.0), onPressed: () => Navigator.of(context).pop(), ), )); } }

  2. 虽然上面的两种方法都可以实现自定义切换动画，但实际使用时应优先考虑使用PageRouteBuilder，这样无需定义一个新的路由类，使用起来会比较方便。
  4. 但是有些时候PageRouteBuilder是不能满足需求的，例如在应用过渡动画时我们需要读取当前路由的一些属性，这时就只能通过继承PageRoute的方式了，举个例子
  6. 假如我们只想在打开新路由时应用动画，而在返回时不使用动画，那么我们在构建过渡动画时就必须判断当前路由isActive属性是否为true，代码如下：
  7. ```dart
  8. @override
  9. Widget buildTransitions(BuildContext context, Animation<double> animation,
  10.     Animation<double> secondaryAnimation, Widget child) {
  11.  //当前路由被激活，是打开新路由
  12.  if(isActive) {
  13.    return FadeTransition(
  14.      opacity: animation,
  15.      child: builder(context),
  16.    );
  17.  }else{
  18.    //是返回，则不应用过渡动画
  19.    return Padding(padding: EdgeInsets.zero);
  20.  }
  21. }

关于路由参数的详细信息读者可以自行查阅API文档，比较简单，不再赘述。读者可以去看更多好用的路由动画链接