因为笔者本身主要从事是Android开发，所以很多角度都是作为一个Android开发者学习Flutter的角度出发，IOS或者H5的开发同学可以选择性阅读
目录
前言
做Android开发的时候，要打开一个新的页面，你得知道你的目标页面对象，然后初始化一个Intent或，再通过startActivity来打开一个新的页面，不能跟web一样，直接丢一个链接地址就跳转到新的页面。而Flutter的framework提供了类似路由跳转的实现
静态路由
- 静态路由的注册
MaterialApp组件中有一个字段routes参数来注册路由，但是这里注册的路由是静态的，它不可以向下一个页面传递参数
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: NavigatorPage(),
routes: {
'/router/first': (BuildContext context) => FirstPage(),
'/router/second': (BuildContext context) => SecondPage()
},
);
}
}
- 通过静态路由跳转（类似于Android中的
startActivity）
Navigator.pushNamed(context, "/router/first");
- 带返回值的静态路由（类似于Android中的
onActivityResult）
注意：静态路由不能传递参数给下一个页面，但是可以接收返回参数
Navigator.pushNamed(context, routeName).then((value){
//可以在这使用返回值value
});
- 返回上一个页面（类似于Android中的
setResult+finish）
Navigator.of(context).pop('这是要返回给上一个页面的数据');
动态路由
- 动态路由无需在
routes中注册即可直接使用
Navigator.push(context, new MaterialPageRoute(builder: (context) {
return new FirstPage(title: '这是要传递给下一个页面的参数');
}));
- 动态路由切换动画
Material库中提供了一个MaterialPageRoute，它可以使用和平台风格一致的路由切换动画，如在iOS上会左右滑动切换，而在Android上会上下滑动切换。如果在Android上也想使用左右切换风格，可以直接使用CupertinoPageRoute, 如：
Navigator.push(context, new CupertinoPageRoute(builder: (context) {
return new FirstPage();
}));
如果想自定义路由切换动画，可以使用PageRouteBuilder，例如我们想以渐隐渐入动画来实现路由过渡：
Navigator.push(context, PageRouteBuilder(
transitionDuration: Duration(milliseconds: 500), //动画时间为500毫秒
pageBuilder: (BuildContext context, Animation animation,
Animation secondaryAnimation) {
return new FadeTransition( //使用渐隐渐入过渡,
opacity: animation,
child: FirstPage()
);
}));
}),
我们可以看到pageBuilder 有一个animation参数，这是Flutter路由管理器提供的，在路由切换时pageBuilder在每个动画帧都会被回调，因此我们可以通过animation对象来自定义过渡动画。
无论是MaterialPageRoute、CupertinoPageRoute，还是PageRouteBuilder，它们都继承自PageRoute类，而PageRouteBuilder其实只是PageRoute的一个包装，我们可以直接继承PageRoute类来实现自定义路由，如下所示
定义一个路由类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 animation,
Animation secondaryAnimation) => builder(context);
@override
Widget buildTransitions(BuildContext context, Animation animation,
Animation secondaryAnimation, Widget child) {
return FadeTransition(
opacity: animation,
child: builder(context),
);
}
}
使用FadeRoute
Navigator.push(context, FadeRoute(builder: (context) {
return FirstPage();
}));
虽然上面的两种方法都可以实现自定义切换动画，但实际使用时应考虑优先使用PageRouteBuilder，这样无需定义一个新的路由类，使用起来会比较方便。但是有些时候PageRouteBuilder是不能满足需求的，例如在应用过渡动画时我们需要读取当前路由的一些属性，这时就只能通过继承PageRoute的方式了，举个例子，假如我们只想在打开新路由时应用动画，而在返回时不使用动画，那么我们在构建过渡动画时就必须判断当前路由isActive属性是否为true，代码如下：
@override
Widget buildTransitions(BuildContext context, Animation animation,
Animation secondaryAnimation, Widget child) {
//当前路由被激活，是打开新路由
if(isActive) {
return FadeTransition(
opacity: animation,
child: builder(context),
);
}else{
//是返回，则不应用过渡动画
return Padding(padding: EdgeInsets.zero);
}
}
总结
静态路由和动态路由最大的差距就是动态路由可以向下一个页面传递参数，而静态理由不可以。且动态路由可以设置路由切换的动画