本文闡述Fluro的封裝和深入使用。
出發(fā)點(diǎn)仍然解決以下問題
我們的App組織架構(gòu)如下
- login模塊 - home模塊 - buy模塊對(duì)于一個(gè)非mini個(gè)人獨(dú)立玩耍型App对湃，我們需要高效的管理頁(yè)面路由屏轰，并兼顧后續(xù)頁(yè)面擴(kuò)展。
首先
作者說明
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.
由于每個(gè)地方都要用到router
final router = Router();
那么我們可以 store the router globally/statically，封裝一個(gè)App級(jí)別的router對(duì)象，以便我們?cè)贏pp任何一個(gè)地方使用。
新建application.dart文件
class MyAppRouter{
static Router router;
}
讓我們把定義在HomePage等單個(gè)頁(yè)面中的router抽離出來
class MyHomePage extends StatelessWidget {
//final router = Router(); //刪除本行
在App級(jí)別的地方引入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);
對(duì)于整個(gè)App顾犹，全部都使用MyAppRouter.router
接下來，我們看到我們對(duì)每個(gè)頁(yè)面都定義了handler褒墨，例如
var buyPageHandler = Handler(
handlerFunc: (BuildContext context, Map<String, dynamic> params) {
return BuyPage();
});
查看源碼炫刷，我們看到handler需要傳入HandlerFunc，而HandlerFunc
需要傳入Map<String, List<String>> parameters郁妈。我們現(xiàn)有的代碼并沒有使用到papramters浑玛，讓我們改造一下BuyPage，跳轉(zhuǎn)BuyPage時(shí)噩咪，需要傳入一個(gè)字符串锄奢。
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);
});
那么我們跳轉(zhuǎn)的時(shí)候就需要傳一個(gè)參數(shù)進(jìn)來
MyAppRouter.router.navigateTo(context, '/users/1234?id=$a',
transition: TransitionType.fadeIn),
為什么用'id'這個(gè)key？
為什么用[0]剧腻？
為什么是'/users/1234?id=$a'拘央？
Fluro零碎解釋
以上，我們看到handler其實(shí)是對(duì)每個(gè)路由的配置信息书在，返回值是該路由一個(gè)實(shí)例灰伟。我們的App現(xiàn)在有3個(gè)，以后會(huì)有更多的路由，那么我們把handler集中到一個(gè)地方進(jìn)行管理也是非常好的栏账。
新建rotuer_handler.dart 帖族，把上面一段代碼從每個(gè)頁(yè)面中抽離出來
var buyPageHandler =
Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
var data = params['id'][0];
return BuyPage(data);
});
...
//其他頁(yè)面的handler
那么使用handler時(shí)候，引入rotuer_handler.dart 即可
接下來挡爵，我們還需要對(duì)路由有一個(gè)總體的配置竖般，比如根目錄，非法路徑的空白頁(yè)面茶鹃。
新建一個(gè)route_basic.dart
class RoutesBaic { //配置類
static String root = '/'; //根目錄
static String detailsPage = '/detail'; //詳情頁(yè)面
//靜態(tài)方法
static void configureRoutes(Router router){//路由配置
//找不到路由
router.notFoundHandler = new Handler(
handlerFunc: (BuildContext context,Map<String,List<String>> params){
print('ERROR====>ROUTE WAS NOT FONUND!!!');
}
);
//集中定義路由
...
}
}
讓我們把分布于每個(gè)頁(yè)面的路由定義也集中到這里進(jìn)行管理
刪除
MyAppRouter.router.define('/users/1234', handler: buyPageHandler);
在route_basic.dart中添加
//集中定義路由
router.define(detailsPage, handler: detailsHandler);
我們需要在App初始化的時(shí)候 調(diào)用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(),
);
}
}
運(yùn)行程序lib3
至此我們完成的Fluro的高端使用涣雕。
