本文阐述Fluro的封装和深入使用。
出发点仍然解决以下问题
我们的App组织架构如下
- login模块 - home模块 - buy模块对于一个非mini个人独立玩耍型App，我们需要高效的管理页面路由，并兼顾后续页面扩展。
首先
作者说明
It may be convenient for you to store the router globally/statically so that you can access the router in other areas in your application.
由于每个地方都要用到router
final router = Router();
那么我们可以 store the router globally/statically，封装一个App级别的router对象，以便我们在App任何一个地方使用。
新建application.dart文件
class MyAppRouter{
static Router router;
}
让我们把定义在HomePage等单个页面中的router抽离出来
class MyHomePage extends StatelessWidget {
//final router = Router(); //删除本行
在App级别的地方引入MyAppRouter
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final router = Router();
MyAppRouter.router = router;
return MaterialApp(
title: 'Fluro Demo',
home: MyHomePage(),
);
}
}
那么我们之前的代码,凡是使用final router = Router()定义router的地方
都可以改成使用MyAppRouter.router
例如
router.define('/users/1234', handler: buyPageHandler);
就可以更换为
MyAppRouter.router.define('/users/1234', handler: buyPageHandler);
对于整个App，全部都使用MyAppRouter.router
接下来，我们看到我们对每个页面都定义了handler，例如
var buyPageHandler = Handler(
handlerFunc: (BuildContext context, Map<String, dynamic> params) {
return BuyPage();
});
查看源码，我们看到handler需要传入HandlerFunc，而HandlerFunc
需要传入Map<String, List<String>> parameters。我们现有的代码并没有使用到papramters，让我们改造一下BuyPage，跳转BuyPage时，需要传入一个字符串。
class BuyPage extends StatelessWidget {
final String data;
const BuyPage(this.data);
@override
...
}
改造*buyPageHandler *
var buyPageHandler = Handler(
handlerFunc: (BuildContext context, Map<String, dynamic> params) {
var data = params['id'][0];
return BuyPage(data);
});
那么我们跳转的时候就需要传一个参数进来
MyAppRouter.router.navigateTo(context, '/users/1234?id=$a',
transition: TransitionType.fadeIn),
为什么用'id'这个key？
为什么用[0]？
为什么是'/users/1234?id=$a'？
Fluro零碎解释
以上，我们看到handler其实是对每个路由的配置信息，返回值是该路由一个实例。我们的App现在有3个，以后会有更多的路由，那么我们把handler集中到一个地方进行管理也是非常好的。
新建rotuer_handler.dart ，把上面一段代码从每个页面中抽离出来
var buyPageHandler =
Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
var data = params['id'][0];
return BuyPage(data);
});
...
//其他页面的handler
那么使用handler时候，引入rotuer_handler.dart 即可
接下来，我们还需要对路由有一个总体的配置，比如根目录，非法路径的空白页面。
新建一个route_basic.dart
class RoutesBaic { //配置类
static String root = '/'; //根目录
static String detailsPage = '/detail'; //详情页面
//静态方法
static void configureRoutes(Router router){//路由配置
//找不到路由
router.notFoundHandler = new Handler(
handlerFunc: (BuildContext context,Map<String,List<String>> params){
print('ERROR====>ROUTE WAS NOT FONUND!!!');
}
);
//集中定义路由
...
}
}
让我们把分布于每个页面的路由定义也集中到这里进行管理
删除
MyAppRouter.router.define('/users/1234', handler: buyPageHandler);
在route_basic.dart中添加
//集中定义路由
router.define(detailsPage, handler: detailsHandler);
我们需要在App初始化的时候 调用configureRoutes来完成路由定义
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final router = Router();
MyAppRouter.router = router;
//完成路由全局配置和路由定义
RoutesBasic.configureRoutes(router);
return MaterialApp(
title: 'Fluro Demo',
home: MyHomePage(),
);
}
}
运行程序lib3
至此我们完成的Fluro的高端使用。
