Flutter(二十六)——自定义路由

最新推荐文章于 2024-06-08 19:33:05 发布

李元静

最新推荐文章于 2024-06-08 19:33:05 发布

阅读量1.4w

点赞数 2

分类专栏： Flutter开发手机应用 android 文章标签：移动开发 flutter PageBuilder 自定义路由路由

本文链接：https://blog.csdn.net/liyuanjinglyj/article/details/105032026

版权

这篇博客探讨了如何在Flutter中自定义路由，尤其是使用PageRouteBuilder来改变默认的转场效果。通过属性讲解和实战示例，作者展示了如何创建一个带有Hero效果的路由转场，包括定义方法切换路由、创建CustomLogo自定义图标以及设置Hero标签以实现动画过渡。最终，实现了在路由跳转中平滑的Hero动画效果。

摘要由CSDN通过智能技术生成

本文目录

PageRouteBuilder

前面我们介绍的所有路由都是MaterialPageRoute。但这并不能满足项目中的实际需求，有时候我们也需要修改路由默认的转场效果，这个时候就需要自定义路由，要用到另一个类，它就是PageRouteBuilder，首先我们来看看它的源码：

PageRouteBuilder({
   
    RouteSettings settings,
    @required this.pageBuilder,
    this.transitionsBuilder = _defaultTransitionsBuilder,
    this.transitionDuration = const Duration(milliseconds: 300),
    this.opaque = true,
    this.barrierDismissible = false,
    this.barrierColor,
    this.barrierLabel,
    this.maintainState = true,
    bool fullscreenDialog = false,
  }) : assert(pageBuilder != null),
       assert(transitionsBuilder != null),
       assert(opaque != null),
       assert(barrierDismissible != null),
       assert(maintainState != null),
       assert(fullscreenDialog != null),
       super(settings: settings, fullscreenDialog: fullscreenDialog);

属性讲解

我们来看一下PageRouteBuilder源码中几个重要的属性，如下图所示：

属性	取值
Opaque	是否遮挡整个屏幕
transitionsBuilder	用于自定义的转场效果
pageBuilder	用来创建所要跳转到的页面
transitionDuration	转场动画的持续时间

自定义路由转场效果

介绍完几个重要的属性，我们就直接来实战把，这里我们将通过一个自定义的Widget和PageRouteBuild，实现一个简单的Hero效果的路由转场，首先，我们定义一个方法，用于路由的切换，代码如下：

_customToButton(Widget page){
   
    Navigator.of(context).push(
      PageRouteBuilder<Null>(
        pageBuilder: (BuildContext context,Animation<double> anim1,Animation<double> anim2){
   <