写点什么

Flutter 简单实用的 fluro 路由管理插件简介

作者:岛上码农
  • 2022 年 4 月 02 日
  • 本文字数:2335 字

    阅读完需:约 8 分钟

Flutter 简单实用的 fluro 路由管理插件简介

前面两篇文章我们介绍了 Flutter 的原生导航器 Navigator 实现页面跳转,路由及路由拦截的使用,具体可以参考之前的文章:


  1. https://xie.infoq.cn/article/cf42d4789cff5de8fde0f38b4

  2. https://xie.infoq.cn/article/a620a1908a8b74a354963b0aa


使用原生的路由基本上能够满足大部分需求,但如果想要对页面做类似浏览器 url 那样的路由,或者控制页面跳转的转场动画,那么原生的路由需要做不少的改造。在 pub 上,有优秀的路由插件 fluro 解决这类问题。

fluro 的使用方法

fluro 的使用步骤比较简单,分为下面三个步骤:


  • 构建FluroRouter路由实例,一个应用一个实例即可;

  • 定义路由路径的处理器(Handler),用于匹配不同路由路径的处理方法。

  • MaterialApp 中把 onGenerateRoute设置为 FluroRouter.generator方法来构建系统路由。


需要注意的是,Fluro 默认会把路径“/”当做根目录,因此必须定义根目录的 Handler。另外对于路由不存在的情况,可以设置FluroRouter.notFoundHandler定义错误路由处理器。

路由处理器 Handler

fluro 的关键实现是 HandlerHandler 的定义如下:


class Handler {  Handler({this.type = HandlerType.route, required this.handlerFunc});  final HandlerType type;  final HandlerFunc handlerFunc;}
复制代码


构造函数有两个属性,一个是 HandlerType 枚举,分为 route 和 function 两个值,其中用于路由的是 route,也是默认值。handlerFunc 是必传的,这是响应路由的一个方法,需要返回一个 Widget,以便跳转到对应的页面。


typedef Widget? HandlerFunc(    BuildContext? context, Map<String, List<String>> parameters);
复制代码


HandlerFunc接收上下文 context,以及携带了路由参数,这个参数是一个Map,对应路由路径的多个路由参数。例如/dynamic/:id 路由,如果实际路由为/dynamic/1?event=a&event=b,则 parameters 的格式如下:


{  "id": ["1"],  "event": ["a", "b"]}
复制代码


需要注意路由参数的数据类型全部是String 类型,通过这个 Handler,可以将路由参数传递到下级页面。

使用示例

我们为了统一管理路由,定义一个类 RouterManager,里面的属性均为静态成员,以便直接通过类访问,而无需创建示例。当然考虑封装性,也可以做成单例模式。需要注意,FluroRouter 只能初始化一次,否则会导致热重载报错提示路由已经被定义。我们把上两篇的路由跳转替换为 fluro 跳转,RouterManager 的代码如下:


//省略 import
class RouterManager { static String splashPath = '/'; static String loginPath = '/login'; static String homePath = '/home'; static String dynamicPath = '/dynamic'; static String dynamicDetailPath = '$dynamicPath/:id';
static FluroRouter router;
static void initRouter() { if (router == null) { router = FluroRouter(); defineRoutes(); } }
static var loginHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) { return LoginPage(); });
static var dynamicDetailHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) { return DynamicDetailPage(params['id'][0]); });
static var splashHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) { return Splash(); });
static var homeHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) { return AppHomePage(); });
static var notFoundHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) { return NotFound(); });
static void defineRoutes() { router.define(splashPath, handler: splashHandler); router.define(homePath, handler: homeHandler); router.define(loginPath, handler: loginHandler); router.define(dynamicDetailPath, handler: dynamicDetailHandler); router.notFoundHandler = notFoundHandler; }}
复制代码


实际只需要调用 RouterManager.initRouter 方法即可完成路由的初始化,这个需要在 main.dartMaterialApp 中完成,代码如下。与之前的代码相比,不再需要设置navigationKey参数和 initialRoute参数,只是需要在 build 方法里调用初始化路由的方法。


class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    RouterManager.initRouter();    return MaterialApp(      //...      onGenerateRoute:          RouterManager.router.generator,    );  }}
复制代码

页面跳转

页面跳转调用有多种形式,本例我们用到了三种,分别是:


  • 清除路由堆栈跳转:即跳转后的页面作为根页面(没有返回按钮),这种适合闪屏页跳到首页。代码如下:


RouterManager.router.navigateTo(context, RouterManager.homePath, clearStack: true);
复制代码


  • 普通跳转:无参数直接跳转,代码如下:


RouterManager.router.navigateTo(context, RouterManager.loginPath);
复制代码


  • 带参数跳转:路由路径携带参数,和普通跳转类似,只是拼接了路径参数和 query 参数:


RouterManager.router.navigateTo(context, '${RouterManager.dynamicPath}/$id?event=a&event=b')
复制代码

运行效果

我们将闪屏页跳转到首页,动态跳转到详情页,以及登录页和 404 页面进行了更换,运行效果如下图所示。注意看整个转场方式的不同,正常的转场切换是从底部到顶部弹出,但 404 是从左到右弹出(和原生的 push 一样)。这个后续可以在 Handler 里调整或者在路由跳转的时候定义转场动画,我们下一篇再来介绍这方面的使用。




发布于: 刚刚阅读数: 2
用户头像

岛上码农

关注

用代码连接孤岛,公众号@岛上码农 2022.03.03 加入

从南漂到北,从北漂到南的业余码农

评论

发布
暂无评论
Flutter 简单实用的 fluro 路由管理插件简介_flutter_岛上码农_InfoQ写作平台