Flutter路由框架Fluro的使用介绍

现如今，Flutter 越来越火了。作为 Google 提供的新一代跨平台方案，Flutter 受到了越来越多的关注，使用 Flutter 的人也越来越多。用过的人往往都会感叹一句：真香！作为一个 UI 组件，Flutter 自然也需要一个好用的路由，来进行不同界面之间的导航和转换。Fluro，就为 Flutter 提供了一个灵活简单的路由。

简介
Fluro（Flutter router），是 theyakka 在 Github 上开源的 Flutter 路由库，项目仓库位于 https://github.com/theyakka/fluro，目前版本为 1.6.3。Fluro 支持路由导航，支持通配符匹配，支持路由中的命名参数，自带常用的转场效果，并支持效果的自定义。

安装
Fluro目前版本为 1.6.3，需要 Flutter >=1.12.0 和 Dart >= 2.6.0。把 Fluro 添加到 Flutter 项目的依赖中：

dependencies:
  fluro: "^1.6.3"

也可以直接指定 Git 仓库：

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

然后运行

flutter packages upgrade

来更新依赖。

示例
Fluro的使用十分简单。首先需要定义一个 Router 实例：

final router = Router();

然后定义一个Router的Handler，它接受一个handlerFunc函数，函数返回一个组件：

var usersHandler = Handler(handlerFunc: (BuildContext context, Map params) {
  return UsersScreen(params["id"][0]);
});

最后把 Handler 注册到路由上，使用 router 的 define 接口，接受路由路径和对应的 Handler：

router.define("/users/:id", handler: usersHandler);

router.define 也可以接受一个可选的转场类型 transitionType：

router.define(
"users/:id", handler: usersHandler, transitionType: transitionType.inFromLeft);

在上述例子中，匹配的路由模式包含一个命名参数 id，其在路由中以冒号开头。在对应的 Handler 中，Fluro 会对参数进行解析，并能从 Map 参数 params 中获取。对于该例子，路由会拦截如 /users/1234 的路径，并把参数 id = 1234 传递到 UsersScreen 组件。
要使用 Fluro 进行导航，则要把 MaterialApp.onGenerateRoute 配置为 router.generator。例如，

final app = MaterialApp(
      title: 'Fluro',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      onGenerateRoute: Application.router.generator,
    );

此时我们就可以使用 Navigator.push，而 Flutter 的路由机制就会为我们进行路由匹配：

Navigator.push(context, route)

我们也可以 router 的 navigateTo 进行直接导航：

router.navigateTo(context, "/users/1234", transition: TransitionType.fadeIn);

此时，我们的页面就会转换到 /users/1234 所指向的页面。

总结
Fluro 使用方便，与原生的 Flutter 路由相比起来，它的函数式回调和命名参数解析功能，使得路由导航更为清晰，实现更为简单，提高了开发效率。
Fluro 代码清晰，代码量不大，注释丰富，还包含了一个完善的使用例子可供参考，是一个值得进行参考的 Flutter 工具库。
最近我在请教公司大佬关于Flutter开发的问题的时候，他将自己做掌握到的Flutter开发技术点整理成了文档，包含知识脉络 + 诸多细节，由于篇幅有限，这里以图片的形式给大家展示一部分。

有兴趣的可以关注+私信（Flutter）咨询获取方式

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/118789.html

Flutter路由框架Fluro的使用介绍

相关推荐

发表回复

分享到: