flutter 让POP和Push使用不同的动画
时间: 2024-02-27 22:55:34 浏览: 24
在 Flutter 中,我们可以通过自定义 `PageRoute` 来为不同的路由设置不同的转场动画,从而实现 POP 和 Push 使用不同的动画。
以下是一个简单的示例:
```dart
class FadePageRoute<T> extends MaterialPageRoute<T> {
FadePageRoute({WidgetBuilder builder, RouteSettings settings})
: super(builder: builder, settings: settings);
@override
Widget buildTransitions(BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation, Widget child) {
return FadeTransition(opacity: animation, child: child);
}
}
class ScalePageRoute<T> extends MaterialPageRoute<T> {
ScalePageRoute({WidgetBuilder builder, RouteSettings settings})
: super(builder: builder, settings: settings);
@override
Widget buildTransitions(BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation, Widget child) {
return ScaleTransition(scale: animation, child: child);
}
}
```
上面的代码定义了两个自定义路由类 `FadePageRoute` 和 `ScalePageRoute`,分别对应淡入淡出和缩放的转场动画。
接下来,我们可以在 `Navigator` 中使用这些自定义路由:
```dart
Navigator.push(context, ScalePageRoute(builder: (_) => Page2()));
Navigator.pop(context);
Navigator.pushReplacement(context, FadePageRoute(builder: (_) => Page3()));
```
在上面的代码中,我们分别使用 `ScalePageRoute` 和 `FadePageRoute` 进行 Push 和 POP 操作。
需要注意的是,如果我们想在 POP 和 Push 时使用不同的转场动画,就需要分别定义不同的 `PageRoute` 类,并在不同的操作中使用它们。