在之前的路由跳轉時使用的是MaterialPageRoute
,與MaterialPageRoute
作用相同的其實還有CupertinoPageRoute
、PageRouteBuilder
。使用CupertinoPageRoute
時,當路由跳轉時,無論Android還是iOS頁面都是左右切換的,而使用PageRouteBuilder
可以自定義頁面跳轉時的動畫。
一、CupertinoPageRoute
Navigator.push(context, CupertinoPageRoute(
builder: (context) => PageOne()
));
二、PageRouteBuilder
2.1 漸隱漸現
PageRouteBuilder(
pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation){
return FadeTransition(
opacity: animation,
child: PageOne()
);
},
transitionDuration: Duration(milliseconds: 500),
);
2.2 縮放
PageRouteBuilder(
pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation){
return ScaleTransition(
scale: Tween(begin:0.0,end:1.0).animate(CurvedAnimation(
parent:animation,
curve: Curves.fastOutSlowIn
)),
child: routeBuilder(context, arguments: settings.arguments),
);
},
transitionDuration: Duration(milliseconds: 500),
);
2.3 旋轉縮放
PageRouteBuilder(
pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation){
return RotationTransition(
turns: Tween(begin:0.0,end:1.0)
.animate(CurvedAnimation(
parent: animation,
curve: Curves.fastOutSlowIn
)),
child: ScaleTransition(
scale:Tween(begin: 0.0,end:1.0)
.animate(CurvedAnimation(
parent: animation,
curve:Curves.fastOutSlowIn
)),
child: routeBuilder(context, arguments: settings.arguments),
)
);
},
transitionDuration: Duration(milliseconds: 500),
);
2.4 左右滑動(不帶邊界陰影)
PageRouteBuilder(
pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation){
return SlideTransition(
position:
Tween<Offset>(begin: Offset(1.0, 0.0), end: Offset(.0, 0.0))
.animate(CurvedAnimation(
parent: animation, curve: Curves.fastOutSlowIn)),
child: PageOne()
);
},
transitionDuration: Duration(milliseconds: 500),
);