浅尝Flutter(一)
承接上文。

页面路由框架

其实可以讲的主要是Flutter的特性导致的一些架构上的变化。
Android的界面跳转主要涉及到系统层面的各个服务。

但是到了Flutter其实就没有这些概念了，Flutter其实是单Activity架构。
我另一个B端项目POS项目也采用的这种架构，作用很明显，数据通信极其方便。缺点是页面之间的路由维护会稍微复杂点。而且Flutter的Navigator用起来并不方便，一开始项目对Navigator1.0做了一层封装，初始化的参数定义特别死，很不方便，是一个List<String,Map<String,String>>，参数在传递过程中需要来回转换，而且页面标识也不明显，非schema内部跳转也需要把参数进行path转换。

比如A--》B携带参数{ "t1" : 1, "t2" : 2 }，B定义为/test
那么跳转path需要先拼接成/test?t1=1&t2=2，然后到终端页面还解析成了ArrayList<String,Map<String,Strign>>,这可太低效，且难以理解了。

属实不好用，我觉的是一个很失败的封装，然后重新查阅了Flutter官网资料发现Flutter有一个Navigator2,采用了Page的概念去维护页面栈，栈采用Arraylist<Page>，挺清晰的。

所以在其他人开发业务的同时我对项目的路由框架下层进行了重构。对外的接口类不动，但是增加了一些可变参数，减少改动。

class XXXNavigator{
  static Future navigateTo(BuildContext context, String pageDef,
      {bool clearStack = false,
      bool replace = false,
      String? clearToPageDef,
      Map<String, dynamic>? params}) {
    unfocus(context);
    if (globalDebugCtl) {
      print("Jump to $pageDef");
    }

    return CommonRouterDelegate.getInstance().addPage(context, pageDef, params,
        replace: replace,
        clearToPageDef: clearToPageDef,
        clearStack: clearStack);
  }

  static Future navigateTo(BuildContext context, String pageDef,
      {bool clearStack = false,
      bool replace = false,
      String? clearToPageDef,
      Map<String, dynamic>? params})

  //.....省略其他方法
}

CommonRouterDelegate是我实现Navigator的地方。

RouteObserver<PageRoute> routeObserver = RouteObserver<PageRoute>();

typedef RouterBuilder = BasePage? Function(
    String page, Map<String, dynamic>? params);

class CommonRouterDelegate extends RouterDelegate<CommonRoutePath>
    with ChangeNotifier, PopNavigatorRouterDelegateMixin<CommonRoutePath> {
  static CommonRouterDelegate? _instance;

  static CommonRouterDelegate getInstance() {
    _instance ??= CommonRouterDelegate._private();
    return _instance!;
  }

  CommonRouterDelegate._private();

  @override
  CommonRoutePath? get currentConfiguration => _currentConfiguration;

  @override
  final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
  CommonRoutePath? _currentConfiguration;

  var test = false;

  List<BasePage> pages = [
    const BasePage(child: SplashScreen()),
  ];

  @override
  Widget build(BuildContext context) {
    return Navigator(
      key: navigatorKey,
      pages: List.of(pages),
      observers: [routeObserver],
      onPopPage: (route, result) {
        if (!route.didPop(result)) {
          return false;
        }
        BasePage page = pages.removeLast();
        notifyListeners();
        _popCompleter[route.settings.name]?.complete(result);
        if (result is! LoadingPopEntity) {
          CommonRouterObserver.getInstance().onPageEnd(page);
        }
        //通知路由变化
        return true;
      },
    );
  }

  @override
  Future<void> setNewRoutePath(CommonRoutePath configuration) async {
    _currentConfiguration = configuration;
    notifyListeners();
  }

  final Map<String, Completer<dynamic>?> _popCompleter = {};

  //执行指定行为并打开某个页面
  Future addPage(
      BuildContext context, String pageDef, Map<String, dynamic>? params,
      {bool replace = false,
      bool clearStack = false,
      String? clearToPageDef}) async {
    BasePage? page = getPage(pageDef, params);

    if (page != null) {
      if (replace) {
        pages.removeLast();
      }
      if (clearStack) {
        pages.clear();
      }
      if (clearToPageDef != null) {
        int index =
            pages.indexWhere((element) => element.name == clearToPageDef);
        if (index > 0) {
          pages = pages.sublist(0, index + 1);
        }
      }
      pages.add(page);
      notifyListeners();
      CommonRouterObserver.getInstance().onPageStart(page);
      _popCompleter[pageDef] = Completer<dynamic>();
      return await _popCompleter[pageDef]!.future;
    }
  }

  void clear() {
    pages.clear();
    notifyListeners();
  }

  void popUtil(BuildContext context, String clearToPageDef) {
    int index = pages.indexWhere((element) => element.name == clearToPageDef);
    while (index > 0 && index < pages.length) {
      BasePage page = pages.removeLast();
      // print("<<<<<<<<popUtil>clearToPageDef $page , index = $index");
      _popCompleter[page.name!] = Completer<dynamic>();
      _popCompleter[page.name]?.complete();
      CommonRouterObserver.getInstance().onPageEnd(page);
      PageRoute cur = ModalRoute.of(context) as PageRoute;
      routeObserver.didPop(cur, cur);
      index++;
    }
    notifyListeners();
  }

  BasePage<dynamic>? getPage(String pageDef, Map<String, dynamic>? params) {
    return baseModuleBuilder.call(pageDef, params) ??
        homeModuleBuilder.call(pageDef, params) ??
        accountModuleBuilder.call(pageDef, params) ??
        payModuleBuilder.call(pageDef, params);
  }
}

baseModuleBuilder，homeModuleBuilder，accountModuleBuilder，payModuleBuilder等是我们的页面工厂，主要建立的是页面和PageDef的关联。
定义的PageDef中维护的是我们每个页面的字符串路由描述。ModuleBuilder的作用还有对业务进行分类的作用。基于PageDef的映射关系我们实现页面路由也是极其方便。

核心的几个点主要是，页面分发和页面栈的维护，以及Flutter的await机制的维护，这个还挺好用的，比Android的startActivityForResult好用多了。
从主要方法addPage和Pop。
其中addPage中的几个参数尤为重要，分为replace，clearStack，clearToPageDef.
主要是实现了跳新页面置换现在的页面（启动页面分发等场景），跳新页面清栈（非游客模式的token实现场景），清理页面到指定PageDef并打开新页面（主要是支付成功之后的下级页面跳转等场景）。

实际在使用一段时间之后，发现页面嵌套await存在一些小问题，我知道是什么问题，前段时间太忙，加上代码目前稳定，所以没有来得及修复，后面修复的更新一下。