flutter路由管理方法Fluro使用（一）

引言

对于flutter路由使用，前期我们需要能达到两个功能点：

1. 使用route进行页面跳转，传递和接收参数；
2. 使用route，返回widget

Fluro需要进行依赖使用：(.yaml文件对齐有严格要求)

dependencies:
  flutter:
    sdk: flutter
  # 路由管理三方Fluro
  # https://github.com/theyakka/fluro
  fluro: ^1.6.3

假设我们的app组织架构如下：

- app(壳)
- packageA （组件A）
- packageB （组件B）

第一步（准备）

1. 在packageA，packageB 等需要进行路由支持的组件中，新建文件 ModuleRoutes.dart

class ModuleRoutes {
  List<RouteEntry> _routes;
  ModuleRoutes() {
    _routes = [
      RouteEntry('pathA', handler: Handler(handlerFunc:
          (BuildContext context, Map<String, List<String>> params) {
        return AWidget();
      }))
    ];
  }  
  List<RouteEntry> get routes => _routes;
}

pathA为路由路径，AWidget为跳转的具体页面，params为跳转页面传递的参数；

* 入参的解析工作

通过路由进行参数传递，参数值类型必须为基础数据类型，与原生不同点在于，原生可以将一个数据模型ModuleA直接进行传递，Flutter中，需要将ModuleA转换成Map<String, dynamic>，再对map.toString(),然后将该字符串作为内容进行传递

String dataParam = params['入参名称'][0];
var result = json.decode(dataParam)

dataParam 类型为json的字符串结构, 具体解析方式参考如下：

1. 当传入的json结果为具体模型对象时

Map<String, dynamic> strMap =json.decode(dataParam) as Map<String,dynamic>;
ModuleA result = ModuleA.fromJson(strMap);
//ModuleA为具体的模型对象

2. 当传入的json结果为数据模型数组时

List strList = json.decode(dataParam) as List<dynamic>;
final List mapList =strList.map((e) => e as Map<String, dynamic>).toList();
List<ModuleA>result = mapList.map((e) => ModuleA.fromJson(e)).toList();

第二步（commonModule）

定义一个工具类进行路由的全局管理和保存

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入口处对各组件路由进行注册管理

void main() async {
  //注册路由，有几个组件配置了路由就注册几个组件
  GlobalRouterManager.registerRoutes(ModuleRoutesA.routes);
  GlobalRouterManager.registerRoutes(ModuleRoutesB.routes);
  runApp(...)
}

路由跳转：

1. 无参数跳转

GlobalRouterManager.router.navigateTo(context, '/pathA');

2. 带参数跳转，参数插入url里面

String route = '/pathA?message=${Uri.encodeComponent(message)}';
GlobalRouterManager.router.navigateTo(context, route);

路由获取Widget：

下一篇进行讲解