Flutter 路由管理(二)

1,386 阅读2分钟

在上一篇文章中,我们介绍了Flutter是如何进行路由管理的。在实际的工作中,Flutter为我们提供的路由管理并不能满足我们所有的需求。所以,今天我们来介绍一个企业级路由 fluro 。

如何安装?

我们可以通过Flutter自身的包管理进行安装,在pubspec.yaml文件中添加依赖:

dependencies
 fluro: "^1.5.0"

除此之外,你还可以直接使用git repo来添加依赖:

dependencies
 fluro:
   git: git://github.com/theyakka/fluro.git

完成添加之后,我们就可以使用flutter packages upgrade命令,更新我们的依赖库。

如何使用?

fluro中,为提供了Router类来完成路由器的初始化、路由的管理、界面Push/Pop。

路由器的初始化

查看Github上文档介绍,我们可以这样创建路由器。

final router = Router();

除了直接通过创建Router的方式来获得Router对象,我们还可以使用fluro给我提供的Router对象(appRouter)。

class Router {
    static final appRouter = new Router();
    // ... 省略多余代码
}

观看上面fluro中的Router类的源码,我们可以发现在Router类中,有一个类成员变量appRouter。类成员变量appRouter会在运行时,被使用时初始化,并且只会初始化一次。所以,我们可以直接使用appRouter注册路由、Push、Pop。

注册路由

fluro给我们提供了注册路由的方式,我们可以使用Router类中的void define(String routePath,{@required Handler handler, TransitionType transitionType})函数。

  • routePath: 路由的地址,也就是进行navigateTo所需要的参数;
  • handler: 用来描述具体路由;
  • transitionType: 转场动画。
Router.appRouter.define(
    "/user/:id",
    handler: Handler(handlerFunc: (BuildContext context, Map<String, List<String>> paramaters) {
        return NewRouter();
    },
    transitionType: TransitionType.native,
);

跳转路由

我们可以使用Router类中的Future navigateTo(BuildContext context, String path, {bool replace = false, bool clearStack = false, TransitionType transition, Duration transitionDuration = const Duration(milliseconds: 250), RouteTransitionsBuilder transitionBuilder})函数。

  • context: 上下文;
  • path: 路由的地址,相当于上面的routePath;
  • replace: 是否替换当前路由
  • clearStack:
  • transition: 转场动画的类型
  • transitionDuration: 转场动画持续的时间
  • transitionBuilder: 自定义转场动画,
Router.appRouter.navigateTo("/user/12345");

如何自定义路由的转场动画