flutter自定义POP和Push不同的路由动画
时间: 2024-02-27 12:55:29 浏览: 172
push和pop自定义动画
想要在 Flutter 中为不同的路由(页面)设置不同的转场动画,可以通过自定义路由来实现。下面是一个简单的示例,演示如何创建一个自定义路由并为其设置不同的转场动画:
1. 创建一个自定义路由类 MyCustomRoute,继承自 MaterialPageRoute。
```dart
class MyCustomRoute extends MaterialPageRoute {
MyCustomRoute({WidgetBuilder builder, RouteSettings settings})
: super(builder: builder, settings: settings);
@override
Widget buildTransitions(BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation, Widget child) {
// 这里可以为不同的路由设置不同的转场动画
if (settings.name == '/page1') {
return FadeTransition(opacity: animation, child: child);
} else if (settings.name == '/page2') {
return ScaleTransition(scale: animation, child: child);
} else {
// 默认的转场动画
return super.buildTransitions(context, animation, secondaryAnimation, child);
}
}
}
```
2. 在 MaterialApp 中使用自定义路由
```dart
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'MyApp',
initialRoute: '/',
onGenerateRoute: (RouteSettings settings) {
switch (settings.name) {
case '/page1':
return MyCustomRoute(builder: (_) => Page1(), settings: settings);
case '/page2':
return MyCustomRoute(builder: (_) => Page2(), settings: settings);
default:
return MyCustomRoute(builder: (_) => HomePage(), settings: settings);
}
},
);
}
}
```
在上面的示例中,我们为两个页面(/page1 和 /page2)设置了不同的转场动画,而对于其他页面则使用了默认的转场动画。
需要注意的是,这里的转场动画只是示例,你可以根据自己的需要来自定义转场动画。同时,建议在自定义路由类中重写 buildPage 方法,以便于在每次进入新页面时执行一些初始化操作。
阅读全文