如何解决使用onGenerateRoute在屏幕之间进行有条件的退出转换
我正在通过onGenerateRoute
设置路线和过渡动画,效果很好,只是我希望根据条件(例如在选定的路径上)设置不同的过渡动画:
import 'package:Flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: '/',onGenerateRoute: (RouteSettings settings) {
if (settings.name == '/') {
return PageRouteBuilder<dynamic>(
pageBuilder: (BuildContext context,Animation<double> animation,Animation<double> secondaryAnimation) =>
Page1(),transitionsBuilder: (
BuildContext context,Animation<double> secondaryAnimation,Widget child,) {
return SlideTransition(
position: Tween<Offset>(
begin: Offset.zero,end: const Offset(-1.0,0.0),).animate(secondaryAnimation),// Here I want to have differents transitions
child: child,);
},);
} else if (settings.name == '/second') {
return PageRouteBuilder<dynamic>(
pageBuilder: (BuildContext context,Animation<double> secondaryAnimation) =>
Page2(),) {
return SlideTransition(
position: Tween<Offset>(
begin: const Offset(1.0,end: Offset.zero)
.animate(animation),child: SlideTransition(
position: Tween<Offset>(
begin: Offset.zero,end: const Offset(0.0,1.0),child: child,));
},);
} else if (settings.name == '/third') {
return PageRouteBuilder<dynamic>(
pageBuilder: (BuildContext context,Animation<double> secondaryAnimation) =>
Page3(),) {
return SlideTransition(
position: Tween<Offset>(
begin: const Offset(0.0,);
} else {
return null;
}
},);
}
}
class Page1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Page 1"),backgroundColor: Colors.blue),backgroundColor: Colors.blue,body: Column(
children: [
Center(
child: RaisedButton(
onpressed: () => Navigator.pushNamed(context,'/second'),child: Text("Go to Page 2 with exit transition slide left"),),Center(
child: RaisedButton(
onpressed: () => Navigator.pushNamed(context,'/third'),child: Text("Go to Page 3 with transition slide top"),],);
}
}
class Page2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Page 2"),backgroundColor: Colors.green),backgroundColor: Colors.green,body: Center(
child: RaisedButton(
onpressed: () => Navigator.of(context).pop(),child: Text("Go back to page 1"))),);
}
}
class Page3 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Page 3"),backgroundColor: Colors.yellow),backgroundColor: Colors.yellow,);
}
}
由于在显示屏幕之前设置了退出过渡动画(通过secondaryAnimation
,所以我无法根据单击的按钮来动态更改动画。我该如何实现?
解决方法
(RouteSettings settings) {
final transition = settings.arguments as String;
if (settings.name == '/') {
return PageRouteBuilder<dynamic>(
pageBuilder: (BuildContext context,Animation<double> animation,Animation<double> secondaryAnimation) =>
Page1(),transitionsBuilder: (
BuildContext context,Animation<double> secondaryAnimation,Widget child,) {
switch (transition) {
case 'firstTransition':
secondaryAnimation = //first animation
break;
case 'secondTransition':
secondaryAnimation = //second animation
break;
}
return SlideTransition(
position: Tween<Offset>(
begin: Offset.zero,end: const Offset(-1.0,0.0),).animate(secondaryAnimation),// Here I want to have differents transitions
child: child,);
},);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。