浅尝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存在一些小问题，我知道是什么问题，前段时间太忙，加上代码目前稳定，所以没有来得及修复，后面修复的更新一下。
