Flutter路由管理三方Fluro使用（二）

接上文

本文阐述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的高端使用。