脚本宝典收集整理的这篇文章主要介绍了Flutter 简单实用的 fluro 路由管理插件简介,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
前面两篇文章我们介绍了Flutter 的原生导航器 Navigator 实现页面跳转,路由及路由拦截的使用,具体可以参考之前的文章F1a;
使用原生的路由基本上能够满足大部分需求,但如果想要对页面做类似浏览器 url 那样的路由,或者控制页面跳转的转场动画,那么原生的路由需要做不少的改造。在 pub 上,有优秀的路由插件 fluro 解决这类问题。
fluro 的使用步骤比较简单,分为下面三个步骤:
FluroRouter
路由实例,一个应用一个实例即可;Handler
),用于匹配不同路由路径的处理方法。MATErialApp
中把 onGenerateRoute
设置为FluroRouter.generator
方法来构建系统路由。需要注意的是,Fluro 默认会把路径“/”当做根目录,因此必须定义根目录的 Handler
。另外对于路由不存在的情况,可以设置FluroRouter.notFoundHandler
定义错误路由处理器。
fluro 的关键实现是 Handler
,Handler
的定义如下:
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.dart
的 MaterialApp
中完成,代码如下。与之前的代码相比,不再需要设置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);
RouterManager.router.navigateTo(context, '${RouterManager.dynamicPath}/$id?event=a&event=b')
我们将闪屏页跳转到首页,动态跳转到详情页,以及登录页和404页面进行了更换,运行效果如下图所示。注意看整个转场方式的不同,正常的转场切换是从底部到顶部弹出,但404是从左到右弹出(和原生的 push 一样)。这个后续可以在 Handler 里调整或者在路由跳转的时候定义转场动画,我们下一篇再来介绍这方面的使用。
以上是脚本宝典为你收集整理的Flutter 简单实用的 fluro 路由管理插件简介全部内容,希望文章能够帮你解决Flutter 简单实用的 fluro 路由管理插件简介所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。