Flutter应用开发：多场景路由应用一直以来路由的使用都比较简单，随着业务场景的增多以及业务流程的优化，复杂的应用场景

背景

一直以来路由的使用都比较简单，随着业务场景的增多以及业务流程的优化，复杂的应用场景越来越多。经过现实的反复捶打，复盘开始☺☺☺

依赖

主要使用了原生类Navigator和插件fluro。

• Navigator
• fluro

 Flutter路由框架

dependencies:
  flutter:
    sdk: flutter
  fluro: ^2.0.3

• 定义：在Flutter应用开发过程中，Fluro作为一款优秀的企业级路由框架，提供了灵活的路由选项和清晰的路由定义，旨在简化Flutter应用中的导航和路由管理。

• 特点：

  • 层次分明：便于整体管理路由。
  • 方便扩展：适合中大型项目。
  • 模块化路由定义：将路由定义分散到不同的模块中，便于管理和维护。
  • 命名参数：通过命名参数传递数据，使得路由更加灵活和可读。
  • 错误处理：定义默认的错误处理路由，以便在找不到路由时显示友好的错误页面。

• 安装与使用：需要在pubspec.yaml文件中添加Fluro依赖，并进行相关的路由配置和管理。

应用场景

跳转页面

A界面跳转到B界面，路由栈中记录一条记录，B界面可返回到A界面。

// 普通跳转
NavigatorUtils.push(context, '/home');

跳转页面 + 携带参数

A界面跳转到B界面，路由栈中记录一条记录，B界面可返回到A界面。并携带参数。

push

// push方式使用params携带Map类型参数
NavigatorUtils.push(context, '/home', params: {'id': item.id});

// 路由定义
router.define('/home', handler: Handler(handlerFunc: (_, __) =>HomePage(id: __['id']!.first)));

pushResult

// pushResult方式使用arguments携带不限类型参数
NavigatorUtils.pushResult(context, '/home', (res) => { 
    //TODO 
}, arguments: OrderData(id:item.id) );

// 路由定义
router.define('/home', handler: Handler(handlerFunc: (context, params) {
  /// 类参数，转换参数类型再使用
  final args = context!.settings!.arguments! as OrderData;
  return HomePage(
      id: args.id);
}));

跳转页面 + 返回带参数

最常见的场景是表单界面某一项需要选择，选择数据是一个分页List的页面。选中List中某一项/多项将选择的参数带回表单界面并回填。

// 跳转 + 返回带参数
NavigatorUtils.pushResult(context, '/home',(res) => {
    // TODO
    // 回显车牌号
    // 保存车辆ID
});

Navigator.pop<Object>(context, result)

跳转页面 + 替换掉当前路由

最常见的场景是登录场景，登录成功后跳转到主页，路由完全替换掉登录路由，避免返回到登录页。在业务流转页面也存在大量这种场景。如下图，订单收款流程了4个路由界面，第一个路由界面收款push外其它界面跳转都是替换，最终返回时直接返回到第一个界面。

// 跳转 + 替换
NavigatorUtils.push(context, '/home',replace: true);

跳转页面 + 清空路由栈

最常见的场景是登出场景，登出成功后跳转到登录页，清空之前所有访问的路由栈。

// 跳转 + 清空
NavigatorUtils.push(context, '/login', clearStack: true);

返回 + 刷新原有界面

最常见的场景是，列表上操作在一个界面处理完，返回到列表需更新列表数据。

// 普通跳转
NavigatorUtils.push(context, '/home').then((){
    // 返回后刷新列表
    refreshList();
});

复杂场景，如下图，A push B replace C，C back A，then的处理就失效了。如果在C界面返回时 push | replace A，A路由将对在路由栈中重复两次，得操作两次返回才能完全退出A界面。

// 删除最近一条路由栈记录(原有A页面)
Navigator.of(context).pop();
// 新在路由栈中加一条A，A界面整个刷新
NavigatorUtils.push(context, '/A',replace: true);

跳回指定页面 + 移除中间页面路由

最常见场景，其实在流转页面全push的场景下可以用到。实际业务场景却很难用到，在业务流转中不可能每一步都成功，失败场景是允许退回上一个路由界面再次操作，成功场景才会移除上一个路由界面。每一个流转界面针对场景处理方式不尽相同，无法一概而论的处理。

后记

在业务优化场景中，从订单新建 → 订单分配 -> 订单揽收 -> 新建运单 -> 运单揽收完成 -> 运单打印 -> 订单支付等，连续步骤的操作形成了复杂的路由应用场景，对路由使用上也形成新的挑战。目前总结就这些，jym有案例或更好的解决思路，欢迎评论分享。