引言
上一节,我们成功在Flutter中用fluro实现了页面的跳转功能,满足了日常开发中跨模块的页面跳转需求。但对于组件化开发,我们还有一个需求点:通过路由获取另一个组件中的Widget然后填充到自己的页面中。
实现方式:
- 进行显示依赖,PackageA 直接依赖 PackageB
- 对Fluro进行扩展,使其具备通过路径返回Widget的能力
这时候我们需要了解到dart语言中的一个关键字 “extension”,该关键字用于扩展能力,可以在原有类的基础上进行扩充,有兴趣的小伙伴可以单独搜索一下该关键字的api,下面我们来对Fluro进行扩展,通过路径返回Widget:
创建 rex_fluro.dart
extension RexFluroExt on FluroRouter {
Widget widgetForPath(
{@required String path,
@required BuildContext context,
Map<String, List<String>> parameters}) {
final AppRoute rout = this.match(path).route;
if (!(rout.handler is Handler)) {
return null;
}
final Handler handler = rout.handler as Handler;
if (handler.type != HandlerType.route) {
handler.handlerFunc(context, parameters);
return null;
}
return handler.handlerFunc(context, parameters);
}
}
在需要使用该扩展能力的地方进行import使用
import 'package:rex_test/src/extension/rex_fluro.dart';
...
//使用方法
//通过全局的Fluro管理工具进行控制
GlobalRouterManager.router.widgetForPath(
path: '/pathA',
context: context,
parameters: [{'params':json.encode(ModuleA.tojson())}]);
附上 GlobalRouteManager代码
abstract class GlobalRouterManager {
static FluroRouter _router = FluroRouter();
static FluroRouter get router => _router;
static registerRoutes(Iterable<RouteEntry> entries) {
if(entries!=null && entries.isNotEmpty){
entries.forEach((element) => _router.define(element.name,
handler: element.handler, transitionType: element.transitionType));
}
}
}
使用前,请务必保证在main入口对GlobalRouterManager.registerRoutes()进行对路由注册操作,详细请参考上一篇文章