阅读 979

给你的Flutter页面跳转加上动画

目录传送门:《Flutter快速上手指南》先导篇

页面转场动画对于一个成熟的应用来说,是十分重要的。

Flutter 提供了很便捷的方式实现页面转场动画。

通常,在页面跳转的时候会使用 Flutter 提供的 MaterialPageRoute,它提供了默认的页面跳转动画。

当然,我们也可以定义自己的页面跳转动画。

1. 使用 PageRouteBuilder

使用 PageRouteBuilder,可以快速的自定义一个页面跳转动画。

Navigator.push(context, PageRouteBuilder(pageBuilder:
                      (BuildContext context, Animation animation,
                          Animation secondaryAnimation) {
                    return ScaleTransition(
                        scale: animation,
                        alignment: Alignment.bottomRight,
                        child: AnimPage());
复制代码

2.继承 PageRoute

通过继承 PageRoute,也可以自定义页面跳转动画。

class FadeRoute extends PageRoute {
  FadeRoute({
    @required this.pageBuilder,
    this.transitionDuration = const Duration(milliseconds: 300),
    this.opaque = true,
    this.barrierDismissible = false,
    this.barrierColor,
    this.barrierLabel,
    this.maintainState = true,
  });

  final WidgetBuilder pageBuilder;

  @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<double> animation,
      Animation<double> secondaryAnimation) => pageBuilder(context);

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation, Widget child) {
    return FadeTransition(
      opacity: animation,
      child: pageBuilder(context),
    );
  }
}
复制代码

关键就是实现 buildPage()buildTransitions() 两个函数。

buildTransitions() 中添加转场 Widget 。

使用:

Navigator.push(context, FadeRoute(builder: (context) {
  return AnimPage();
}));
复制代码

定义起来不是很方便,但是便于封装统一的转场动画。

目录传送门:《Flutter快速上手指南》先导篇

如何找到我?

传送门:CoorChice 的主页

传送门:CoorChice 的 Github


关注下面的标签,发现更多相似文章
评论