由於 Google 官方提供的 Flutter 混合式開發方案過於簡單，僅支持打開一個 Flutter View 的能力，而不支持路由間傳參、統一的生命週期、路由棧管理等業務開發中必要的能力，因此我們需要借助第三方混合開發框架（如 Flutter Boost、Thrio、QFlutter 等）的整合能力才能將 Flutter 混合開發模式投入與生產環境。本文中，我們來研究一下這類混合開發框架的職能、架構與源碼。
1. 核心職能與框架目標#
一個合格的混合開發框架至少需要支持到以下能力：
- 混合路由棧的管理：支持打開任意 Flutter 或 Native 頁面。
- 完善的通知機制：如統一的生命週期，路由相關事件通知機制。
對於以上幾點目標，我們以 iOS 為例，來逐步挖掘 Flutter 混合開發模式的最佳實現。
注：因為篇幅問題，本文不探究 Android 的實現，從 iOS 切入只是分析問題的一個角度，因 Android 與 iOS 的實現原理一致，具體實現則大同小異。其次因 Channel 通信層代碼實現比較繁雜，此文對於 Channel 通信層的講解僅停留在使用層面上，具體實現讀者可以自行研究。
注：本文的 Flutter Boost 版本為 1.12.13，Thrio 的版本為 0.1.0
2. 從 FlutterViewController 開始#
在混合開發中，我們使用 Flutter 作為插件化開發，需要起一個 FlutterViewController，這是一個 UIViewController 的實現，其依附於 FlutterEngine，給 Flutter 傳遞 UIKit 的輸入事件，並展示被 FlutterEngine 渲染的每一幀 Flutter views。而這個 FlutterEngine 則充當 Dart VM 和 Flutter 運行時的環境。
需要注意的是，一個 Flutter Engine 只能最多同時運行一個 FlutterViewController。
FlutterEngine: The FlutterEngine class coordinates a single instance of execution for a FlutterDartProject. It may have zero or one FlutterViewController at a time.
啟動 Engine：
self.flutterEngine = [[FlutterEngine alloc] initWithName:@"my flutter engine"];
[self.flutterEngine run];
創建 FlutterViewController 並展示
FlutterViewController *flutterViewController =
[[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil];
[self presentViewController:flutterViewController animated:YES completion:nil];
創建一個 FlutterViewController 我們既可以用已經運行中的 FlutterEngine 去初始化，也可以創建的時候同時去隱式啟動一個 FlutterEngine（不過不建議這樣做，因為按需創建 FlutterEngine 的話，在 FlutterViewController 被 present 出來之後，第一幀圖像渲染完之前，將會引入明顯的延遲），這裡我們用前者的方式去創建。
FlutterEngine: https://api.flutter.dev/objcdoc/Classes/FlutterEngine.html
FlutterViewController: https://api.flutter.dev/objcdoc/Classes/FlutterViewController.html
至此，我們通過官方提供的方案在 Native 工程中啟動 Flutter Engine 並通過 FlutterViewController 展示 Flutter 頁面。
在 Flutter 頁面中，我們可以使用 Navigator.push 在打開另一個 Flutter 頁面（Route）：
因此對於這種路由棧我們很容易實現：
即整個 Flutter 運行在一個單例的 FlutterViewController 容器裡，Flutter 內部的所有頁面都在這個容器中管理。但如果要實現下面這種 Native 與 Flutter 混合跳轉的這種混合路由棧，我們要如何實現呢？
最基本的解決思路是，把這個 FlutterViewController 與 NativeViewController 混合起來，直接讓 FlutterViewController 在 iOS 的路由棧中來回移動，如下圖所示：
這種方案相對複雜，回到我們上面混合棧的場景，這需要精準記錄每個 Flutter 頁面和 Native 容器所處的位置，得知道自己 pop 之後應該回到上一層 Flutter 頁面，還是切換另一個 NativeViewController，這就得維護好頁面索引，並改造原生的 pop 時間與 Navigator.pop 事件，使兩者統一起來。
我們來看看業界的一些解決方案吧！
3. Flutter Boost#
對於混合棧問題，Flutter Boost 會將每個 Flutter 頁面用 FlutterViewController 包裝起來，使之成為多例，用起來就如同 Webview 一樣：
Flutter Boost 的源碼之前在另一篇文章中梳理過《Flutter Boost 混合開發實踐與源碼解析（以 Android 為例）》，那篇文章中梳理了一下 Android 側打開頁面流程的源碼，本文中則儘量不重複介紹源碼，並且將以 iOS 側來重點梳理一下 Flutter Boost 究竟是如何實現的。
3.1 從 Native 打開頁面#
本節分析 Flutter Boost 如何從 Native 打開頁面，即包含以下兩種情況：
- Native -> Flutter
- Native -> Native
在工程中，我們需要接入以下代碼集成 Flutter Boost：
// AppDelegate.m
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
PlatformRouterImp *router = [PlatformRouterImp new];
[FlutterBoostPlugin.sharedInstance startFlutterWithPlatform:router
onStart:^(FlutterEngine *engine) {
}];
self.window = [[UIWindow alloc] initWithFrame: [UIScreen mainScreen].bounds];
[self.window makeKeyAndVisible];
UINavigationController *rvc = [[UINavigationController alloc] initWithRootViewController:tabVC];
router.navigationController = rvc;
self.window.rootViewController = rvc;
return YES;
}
// PlatformRouterImp.m
- (void)openNativeVC:(NSString *)name
urlParams:(NSDictionary *)params
exts:(NSDictionary *)exts{
UIViewController *vc = UIViewControllerDemo.new;
BOOL animated = [exts[@"animated"] boolValue];
if([params[@"present"] boolValue]){
[self.navigationController presentViewController:vc animated:animated completion:^{
}];
}else{
[self.navigationController pushViewController:vc animated:animated];
}
}
- (void)open:(NSString *)name
urlParams:(NSDictionary *)params
exts:(NSDictionary *)exts
completion:(void (^)(BOOL))completion
{
if ([name isEqualToString:@"native"]) { // 模擬打開native頁面
[self openNativeVC:name urlParams:params exts:exts];
return;
}
BOOL animated = [exts[@"animated"] boolValue];
FLBFlutterViewContainer *vc = FLBFlutterViewContainer.new;
[vc setName:name params:params];
[self.navigationController pushViewController:vc animated:animated];
if(completion) completion(YES);
}
可以發現，我們在工程中首先要啟動引擎，對應的 Flutter Boost 源碼如下：
// FlutterBoostPlugin.m
- (void)startFlutterWithPlatform:(id<FLBPlatform>)platform
engine:(FlutterEngine *)engine
pluginRegisterred:(BOOL)registerPlugin
onStart:(void (^)(FlutterEngine * _Nonnull))callback{
static dispatch_once_t onceToken;
__weak __typeof__(self) weakSelf = self;
dispatch_once(&onceToken, ^{
__strong __typeof__(weakSelf) self = weakSelf;
FLBFactory *factory = FLBFactory.new;
self.application = [factory createApplication:platform];
[self.application startFlutterWithPlatform:platform
withEngine:engine
withPluginRegisterred:registerPlugin
onStart:callback];
});
}
// FLBFlutterApplication.m
- (void)startFlutterWithPlatform:(id<FLBPlatform>)platform
withEngine:(FlutterEngine* _Nullable)engine
withPluginRegisterred:(BOOL)registerPlugin
onStart:(void (^)(FlutterEngine *engine))callback
{
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
self.platform = platform;
self.viewProvider = [[FLBFlutterEngine alloc] initWithPlatform:platform engine:engine];
self.isRunning = YES;
if(registerPlugin){
Class clazz = NSClassFromString(@"GeneratedPluginRegistrant");
FlutterEngine *myengine = [self.viewProvider engine];
if (clazz && myengine) {
if ([clazz respondsToSelector:NSSelectorFromString(@"registerWithRegistry:")]) {
[clazz performSelector:NSSelectorFromString(@"registerWithRegistry:")
withObject:myengine];
}
}
}
if(callback) callback(self.viewProvider.engine);
});
}
可以發現啟動引擎時 startFlutterWithPlatform 需要傳入路由管理類，而在 FLBPlatform.h 中可以看到 open 接口是由業務側 Native 傳過來的實現。
// PlatformRouterImp.m
- (void)open:(NSString *)name
urlParams:(NSDictionary *)params
exts:(NSDictionary *)exts
completion:(void (^)(BOOL))completion
{
if ([name isEqualToString:@"native"]) { // 模擬打開native頁面
[self openNativeVC:name urlParams:params exts:exts];
return;
}
BOOL animated = [exts[@"animated"] boolValue];
FLBFlutterViewContainer *vc = FLBFlutterViewContainer.new;
[vc setName:name params:params];
[self.navigationController pushViewController:vc animated:animated];
if(completion) completion(YES);
}
之後要在業務側 AppDelegate.m 中初始化一個 UINavigationController，之後在路由管理類中實現 open 方法，即在這個 navigationContainer 中 push 一個 FLBFlutterViewContainer 容器，它的父類其實就是我們第一章節所說的 FlutterViewController。核心流程的代碼如下：
// FLBFlutterViewContainer.m
- (instancetype)init
{
[FLUTTER_APP.flutterProvider prepareEngineIfNeeded];
if(self = [super initWithEngine:FLUTTER_APP.flutterProvider.engine
nibName:_flbNibName
bundle:_flbNibBundle]){
self.modalPresentationStyle = UIModalPresentationFullScreen;
[self _setup];
}
return self;
}
沒錯，它調用的便是我們第一章節所說的，通過 initWithEngine 來創建 FlutterViewController。
那 Native 頁面如何打開 Flutter 頁面？業務側調用 FlutterBoostPlugin 的 open 方法：
- (IBAction)pushFlutterPage:(id)sender {
[FlutterBoostPlugin open:@"first" urlParams:@{kPageCallBackId:@"MycallbackId#1"} exts:@{@"animated":@(YES)} onPageFinished:^(NSDictionary *result) {
NSLog(@"call me when page finished, and your result is:%@", result);
} completion:^(BOOL f) {
NSLog(@"page is opened");
}];
}
Flutter Boost 對應的處理如下：
// FlutterBoostPlugin.m
+ (void)open:(NSString *)url urlParams:(NSDictionary *)urlParams exts:(NSDictionary *)exts onPageFinished:(void (^)(NSDictionary *))resultCallback completion:(void (^)(BOOL))completion{
id<FLBFlutterApplicationInterface> app = [[FlutterBoostPlugin sharedInstance] application];
[app open:url urlParams:urlParams exts:exts onPageFinished:resultCallback completion:completion];
}
// FLBFlutterApplication.m
- (void)open:(NSString *)url
urlParams:(NSDictionary *)urlParams
exts:(NSDictionary *)exts
onPageFinished:(void (^)(NSDictionary *))resultCallback
completion:(void (^)(BOOL))completion
{
NSString *cid = urlParams[kPageCallBackId];
if(!cid){
static int64_t sCallbackID = 1;
cid = @(sCallbackID).stringValue;
sCallbackID += 2;
NSMutableDictionary *newParams = [[NSMutableDictionary alloc]initWithDictionary:urlParams];
[newParams setObject:cid?cid:@"__default#0__" forKey:kPageCallBackId];
urlParams = newParams;
}
_previousViewController = [self flutterViewController];
_callbackCache[cid] = resultCallback;
if([urlParams[@"present"]respondsToSelector:@selector(boolValue)] && [urlParams[@"present"] boolValue] && [self.platform respondsToSelector:@selector(present:urlParams:exts:completion:)]){
[self.platform present:url
urlParams:urlParams
exts:exts
completion:completion];
}else{
[self.platform open:url
urlParams:urlParams
exts:exts
completion:completion];
}
}
而 Platform 的 open 就是業務側傳過來的路由類中實現的 open，之後就走到了我們本章開頭分析的部分，前文分析過了，後文也有總結，這裡不再贅述了。
小結一下，Native 無論打開 Native 還是 Flutter，都需要業務側調用 Flutter Boost 的 open 方法，而 Flutter Boost 的 open 方法的實現最後其實還是回到了業務側路由管理類中實現的 open 方法，那麼：
- Native 打開 Native：通過路由管理類攔截註冊的 Native 路由，實例化 viewController 之後 push。
- Native 打開 Flutter：實例化 FLBFlutterViewContainer 後 push，而 FLBFlutterViewContainer 本質上是 FlutterViewController。
3.2 從 Flutter 打開頁面#
本節分析 Flutter Boost 如何從 Native 打開頁面，即包含以下兩種情況：
- Flutter-> Flutter
- Flutter-> Native
Dart 業務側直接調用 open 方法打開 Native 或者 Flutter 頁面：
FlutterBoost.singleton.open("native").then((Map value) {
print("call me when page is finished. did recieve native route result $value");
});
FlutterBoost.singleton.open("flutterPage").then((Map value) {
print("call me when page is finished. did recieve native route result $value");
});
open 的源碼如下，可見它的核心是使用 MethodChannel 向 Native 側發送 openPage 消息：
// flutter_boost.dart
Future<Map<dynamic, dynamic>> open(String url,
{Map<dynamic, dynamic> urlParams, Map<dynamic, dynamic> exts}) {
Map<dynamic, dynamic> properties = new Map<dynamic, dynamic>();
properties["url"] = url;
properties["urlParams"] = urlParams;
properties["exts"] = exts;
return channel.invokeMethod<Map<dynamic, dynamic>>('openPage', properties);
}
// boost_channel.dart
final MethodChannel _methodChannel = MethodChannel("flutter_boost");
Future<T> invokeMethod<T>(String method, [dynamic arguments]) async {
assert(method != "__event__");
return _methodChannel.invokeMethod<T>(method, arguments);
}
iOS 側監聽 Dart 側來的消息，針對 openPage 做處理，核心是調用 FLBFlutterApplication 中的 open 方法：
- (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result {
if([@"openPage" isEqualToString:call.method]){
NSDictionary *args = [FLBCollectionHelper deepCopyNSDictionary:call.arguments
filter:^bool(id _Nonnull value) {
return ![value isKindOfClass:NSNull.class];
}];
NSString *url = args[@"url"];
NSDictionary *urlParams = args[@"urlParams"];
NSDictionary *exts = args[@"exts"];
NSNull2Nil(url);
NSNull2Nil(urlParams);
NSNull2Nil(exts);
[[FlutterBoostPlugin sharedInstance].application open:url
urlParams:urlParams
exts:exts
onPageFinished:result
completion:^(BOOL r) {}];
}
}
// FLBFlutterApplication.m
- (FlutterViewController *)flutterViewController
{
return self.flutterProvider.engine.viewController;
}
- (void)open:(NSString *)url
urlParams:(NSDictionary *)urlParams
exts:(NSDictionary *)exts
onPageFinished:(void (^)(NSDictionary *))resultCallback
completion:(void (^)(BOOL))completion
{
NSString *cid = urlParams[kPageCallBackId];
if(!cid){
static int64_t sCallbackID = 1;
cid = @(sCallbackID).stringValue;
sCallbackID += 2;
NSMutableDictionary *newParams = [[NSMutableDictionary alloc]initWithDictionary:urlParams];
[newParams setObject:cid?cid:@"__default#0__" forKey:kPageCallBackId];
urlParams = newParams;
}
_previousViewController = [self flutterViewController];
_callbackCache[cid] = resultCallback;
if([urlParams[@"present"]respondsToSelector:@selector(boolValue)] && [urlParams[@"present"] boolValue] && [self.platform respondsToSelector:@selector(present:urlParams:exts:completion:)]){
[self.platform present:url
urlParams:urlParams
exts:exts
completion:completion];
}else{
[self.platform open:url
urlParams:urlParams
exts:exts
completion:completion];
}
}
同前文分析的一樣，監聽到這個 openPage 之後會調用 Flutter Boost 的 open 方法，而它最後還是會走到 Native 業務側傳來的路由管理類中實現的 open 方法，也是就說從 Flutter 打開頁面，最終也是交由 Native 去負責 push。
小結一下，Flutter 無論的打開 Flutter 還是 Native 頁面，都需要給 iOS 側發送 openPage 的消息，iOS 側收到消息後會執行 Flutter Boost 的 open 方法，而它的實現就是業務側的路由管理類中的 open 方法，即最終仍然交由業務側的路由去實現。
- Flutter 打開 Flutter：iOS 側收到消息後執行 open。即實例化 FLBFlutterViewContainer 後 push，而 FLBFlutterViewContainer 本質上是 FlutterViewController。同 Native 打開 Flutter。
- Flutter 打開 Native：iOS 側收到消息後執行 open。通過路由管理類攔截註冊的 Native 路由，實例化 viewController 之後 push。同 Native 打開 Native。
3.3 Flutter 容器切換#
我們前文說到路由管理統一收歸給 Native 側去實現，每 push 一個 page （無論 Flutter 還是 Native）都是 push 一個容器。統一收歸的好處是由 Native 業務側控制，使用起來直接、簡單；每次 push 一個容器的好處是直觀、簡單。
但是我們之前說到 Flutter Engine 只能最多掛載一個 FlutterViewController，那每次打開 Flutter Page 的時候都會生成一個 vc 會導致問題嗎？我們來看看 Flutter Boost 是如何處理的：
// FLBFlutterViewContainer.m
- (void)viewWillAppear:(BOOL)animated
{
//For new page we should attach flutter view in view will appear
[self attatchFlutterEngine];
[BoostMessageChannel willShowPageContainer:^(NSNumber *result) {}
pageName:_name
params:_params
uniqueId:self.uniqueIDString];
//Save some first time page info.
[FlutterBoostPlugin sharedInstance].fPagename = _name;
[FlutterBoostPlugin sharedInstance].fPageId = self.uniqueIDString;
[FlutterBoostPlugin sharedInstance].fParams = _params;
[super bridge_viewWillAppear:animated];
[self.view setNeedsLayout];
}
- (void)attatchFlutterEngine
{
[FLUTTER_APP.flutterProvider atacheToViewController:self];
}
可以看到在容器 willAppear 的時候會調用 attatchFlutterEngine 方法，其用於切換 engine 的 viewController。即，每次打開 Flutter Page 的時候，剛生成的承載它的容器 FlutterViewController 都會被掛載在 engine 上。是的，Flutter Boost 是通過不斷切換 engine 的 viewController 來展示 Flutter 容器和頁面的。
// FLBFlutterEngine.m
- (BOOL)atacheToViewController:(FlutterViewController *)vc
{
if(_engine.viewController != vc){
_engine.viewController = vc;
return YES;
}
return NO;
}
3.4 統一生命週期與路由事件通知#
那 Flutter Boost 是如何解決 Native 與 Dart 頁面生命週期不一致的問題呢？
我們還是以 2.4 中 FLBFlutterViewController viewWillAppear 來舉例吧，可以看到在這個函數中會執行 willShowPageContainer，它的實現在 BoostMessageChannel.m 中。
// BoostMessageChannel.m
+ (void)willShowPageContainer:(void (^)(NSNumber *))result pageName:(NSString *)pageName params:(NSDictionary *)params uniqueId:(NSString *)uniqueId
{
if ([pageName isEqualToString:kIgnoreMessageWithName]) {
return;
}
NSMutableDictionary *tmp = [NSMutableDictionary dictionary];
if(pageName) tmp[@"pageName"] = pageName;
if(params) tmp[@"params"] = params;
if(uniqueId) tmp[@"uniqueId"] = uniqueId;
[self.methodChannel invokeMethod:@"willShowPageContainer" arguments:tmp result:^(id tTesult) {
if (result) {
result(tTesult);
}
}];
}
它只做了一件事情，就是通過 methodChannel 向 Dart 側發送 willShowPageContainer 這個消息。Dart 側在 container_coordinator.dart 中接受消息：
Flutter Boost 的 Dart 側代碼比較簡單，container_coordinator.dart 顧名思義，就是協同 Native 側容器的類，它負責監聽 Native 來的消息，並使用 container_manager.dart 容器管理類來進行一些處理。
// container_coordinator.dart
Future<dynamic> _onMethodCall(MethodCall call) {
Logger.log("onMetohdCall ${call.method}");
switch (call.method) {
case "willShowPageContainer":
{
String pageName = call.arguments["pageName"];
Map params = call.arguments["params"];
String uniqueId = call.arguments["uniqueId"];
_nativeContainerWillShow(pageName, params, uniqueId);
}
break;
}
}
bool _nativeContainerWillShow(String name, Map params, String pageId) {
if (FlutterBoost.containerManager?.containsContainer(pageId) != true) {
FlutterBoost.containerManager
?.pushContainer(_createContainerSettings(name, params, pageId));
}
// ...省略一些優化代碼
return true;
}
核心是執行 FlutterBoost.containerManager?.pushContainer，它在 container_manager.dart 容器管理類中實現：
// container_manager.dart
final List<BoostContainer> _offstage = <BoostContainer>[];
BoostContainer _onstage;
enum ContainerOperation { Push, Onstage, Pop, Remove }
void pushContainer(BoostContainerSettings settings) {
assert(settings.uniqueId != _onstage.settings.uniqueId);
assert(_offstage.every((BoostContainer container) =>
container.settings.uniqueId != settings.uniqueId));
_offstage.add(_onstage);
_onstage = BoostContainer.obtain(widget.initNavigator, settings);
setState(() {});
for (BoostContainerObserver observer in FlutterBoost
.singleton.observersHolder
.observersOf<BoostContainerObserver>()) {
observer(ContainerOperation.Push, _onstage.settings);
}
Logger.log('ContainerObserver#2 didPush');
}
在執行 BoostContainer.obtain 的過程中，內部會出發生命週期的監聽。除此之外還執行了 observer(ContainerOperation.Push, _onstage.settings); 以此來觸發 Push 事件的通知。
其實在 FlutterBoost 中，框架一共註冊了 3 種類型的事件監聽：
- 容器變化監聽：BoostContainerObserver
- 生命週期監聽：BoostContainerLifeCycleObserver
- Navigator push 和 pop 監聽：ContainerNavigatorObserver
它們都伴隨著混合路由棧的跳轉來觸發相關的事件，至於通信層的源碼本文不再研究，留給有興趣的同學自己看看。
下圖是本章 Flutter Boost 打開頁面的流程總結：
注：此方案頻繁地去創建 FlutterViewController，在 pop 某些 FlutterViewController 之後，這些內存並沒有被 engine 釋放，造成內存泄露：https://github.com/flutter/flutter/issues/25255，這是 engine 的 bug，貌似至今仍未得到很好的解決。
4. Thrio#
Thrio是上個月（2020.03） Hellobike 開源的又一款 Flutter 混合棧框架，這個框架處理的核心問題也依然是我們在第一章抛出來的兩個點：
- 混合路由棧的管理：支持打開任意 Flutter 或 Native 頁面
- 完善的通知機制：如統一的生命週期，路由相關事件通知機制。
在本文中，我們主要來看看 Thrio 是如何實現混合棧管理的，至於通信層的邏輯，我們依然只是順帶講解一些，具體實現比較繁雜因此本文不再分析其源碼。
我們可以先看一下時序圖來宏觀上有一個流程的了解：
4.1 調用#
4.1.1 從 Native 打開頁面#
從 iOS 業務側調用 openUrl 即可打開 Native 或 Flutte 頁面：
- (IBAction)pushNativePage:(id)sender {
[ThrioNavigator pushUrl:@"native1"];
}
- (IBAction)pushFlutterPage:(id)sender {
[ThrioNavigator pushUrl:@"biz1/flutter1"];
}
openUrl 最終會調用 thrio_pushUrl：
// ThrioNavigator.m
+ (void)_pushUrl:(NSString *)url
params:(id _Nullable)params
animated:(BOOL)animated
result:(ThrioNumberCallback _Nullable)result
poppedResult:(ThrioIdCallback _Nullable)poppedResult {
[self.navigationController thrio_pushUrl:url
params:params
animated:animated
fromEntrypoint:nil
result:^(NSNumber *idx) {
if (result) {
result(idx);
}
} poppedResult:poppedResult];
}
4.1.2 從 Flutter 打開頁面#
那我們轉過頭來看看，Thrio 究竟如何實現從 Dart 業務側打開頁面的：
InkWell(
onTap: () => ThrioNavigator.push(
url: 'biz1/flutter1',
params: {
'1': {'2': '3'}
},
poppedResult: (params) =>
ThrioLogger.v('biz1/flutter1 popped:$params'),
),
child: Container(
padding: const EdgeInsets.all(8),
margin: const EdgeInsets.all(8),
color: Colors.yellow,
child: Text(
'push flutter1',
style: TextStyle(fontSize: 22, color: Colors.black),
)),
),
Thrio 的處理如下，它會向 Native 側通過 MethodChannel 發一條 push 消息：
// thrio_navigator.dart
static Future<int> push({
@required String url,
params,
bool animated = true,
NavigatorParamsCallback poppedResult,
}) =>
ThrioNavigatorImplement.push(
url: url,
params: params,
animated: animated,
poppedResult: poppedResult,
);
// thrio_navigator_implement.dart
static Future<int> push({
@required String url,
params,
bool animated = true,
NavigatorParamsCallback poppedResult,
}) {
if (_default == null) {
throw ThrioException('Must call the `builder` method first');
}
return _default._sendChannel
.push(url: url, params: params, animated: animated)
.then<int>((index) {
if (poppedResult != null && index != null && index > 0) {
_default._pagePoppedResults['$url.$index'] = poppedResult;
}
return index;
});
}
// navigator_route_send_channel.dart
Future<int> push({
@required String url,
params,
bool animated = true,
}) {
final arguments = <String, dynamic>{
'url': url,
'animated': animated,
'params': params,
};
return _channel.invokeMethod<int>('push', arguments);
}
Native 側接受到 push 消息後，同樣會調用 thrio_pushUrl，即，從 Native 或 Flutter 打開頁面的邏輯，都統一收歸到 Native 側進行處理了：
- (void)_onPush {
__weak typeof(self) weakself = self;
[_channel registryMethodCall:@"push"
handler:^void(NSDictionary<NSString *,id> * arguments,
ThrioIdCallback _Nullable result) {
NSString *url = arguments[@"url"];
if (url.length < 1) {
if (result) {
result(nil);
}
return;
}
id params = [arguments[@"params"] isKindOfClass:NSNull.class] ? nil : arguments[@"params"];
BOOL animated = [arguments[@"animated"] boolValue];
ThrioLogV(@"on push: %@", url);
__strong typeof(weakself) strongSelf = weakself;
[ThrioNavigator.navigationController thrio_pushUrl:url
params:params
animated:animated
fromEntrypoint:strongSelf.channel.entrypoint
result:^(NSNumber *idx) { result(idx); }
poppedResult:nil];
}];
}
4.1.3 thrio_pushUrl#
那我們看看這個 thrio_pushUrl 究竟做了什麼事情：
// UINavigationController+Navigator.m
- (void)thrio_pushUrl:(NSString *)url
params:(id _Nullable)params
animated:(BOOL)animated
fromEntrypoint:(NSString * _Nullable)entrypoint
result:(ThrioNumberCallback _Nullable)result
poppedResult:(ThrioIdCallback _Nullable)poppedResult {
@synchronized (self) {
UIViewController *viewController = [self thrio_createNativeViewControllerWithUrl:url params:params];
if (viewController) {
// 4.2 中分析
} else {
// 4.3 中分析
}
}
}
可以發現它做的第一件事情就是調用 thrio_createNativeViewControllerWithUrl 創建一個 viewController，thrio_createNativeViewControllerWithUrl 實現如下：
- (UIViewController * _Nullable)thrio_createNativeViewControllerWithUrl:(NSString *)url params:(NSDictionary *)params {
UIViewController *viewController;
NavigatorPageBuilder builder = [ThrioNavigator pageBuilders][url];
if (builder) {
viewController = builder(params);
// 省略一些額外處理的代碼
}
return viewController;
}
理解這段代碼要結合 Thrio 的路由註冊流程，Native 業務側註冊了路由之後，Thrio 中會維護一個 map 來管理這些註冊的路由，key 為註冊的路由名，value 為對應的 builder。那 thrio_createNativeViewControllerWithUrl 其實就是嘗試去根據路由名去創建一個 NativeViewController 容器，如果註冊過的就肯定會返回 viewController，若在 Native 側沒有註冊過這個路由，就返回 nil。因此也就有了下面根據 viewController 存在與否走的兩套邏輯了。那麼我們看看什麼時候會創建成功呢？那就是業務側 pushUrl 打開的是一個在 Native 註冊的頁面就會返回 NativeController，否則沒有註冊過去調用 pushUrl，意味著業務側打開的路由名是從 Flutter 側註冊的，那它要打開的就是一個 FlutterViewController。
Thrio 作者 @稻子 指出：這裡還包含 Flutter 側也沒有註冊的邏輯，這樣寫是為了判斷路由是否在 Native 側註冊了，如果註冊了就打開原生頁面，否則就交由 Flutter 處理。如果 Flutter 側註冊了，就會打開 Flutter 頁面，否則就返回 null。這裡後面也會說到，其實咱們說想要打開 Flutter 頁面，也包括了這個頁面沒有被註冊的情況了。
因此：
- viewController 存在，即要打開的是 Native 頁面。
- viewController 不存在，即要打開的是 Flutter 頁面（注：這裡主要是為了交由 Flutter 處理，Flutter 也可能沒有註冊這個路由）。
接下來我們來繼續分析這兩段邏輯。
注：Thrio 將容器分為兩類，一類是 NativeViewController，即承載 Native 頁面的容器；另一類是 FlutterViewController，即承載 Flutter 頁面的容器。
4.2 打開 Native 頁面#
viewController 存在，即要打開的是 Native 頁面：
if (viewController) {
[self thrio_pushViewController:viewController
url:url
params:params
animated:animated
fromEntrypoint:entrypoint
result:result
poppedResult:poppedResult];
}
thrio_pushViewController 實現如下：
- (void)thrio_pushViewController:(UIViewController *)viewController animated:(BOOL)animated {
// ...省略處理 navigatorbar 的代碼
[self thrio_pushViewController:viewController animated:animated];
}
我們打開的是 NativeViewController，因此走的是下面的分支，調用 thrio_pushViewController：
- (void)thrio_pushViewController:(UIViewController *)viewController
url:(NSString *)url
params:(id _Nullable)params
animated:(BOOL)animated
fromEntrypoint:(NSString * _Nullable)entrypoint
result:(ThrioNumberCallback _Nullable)result
poppedResult:(ThrioIdCallback _Nullable)poppedResult {
if (viewController) {
NSNumber *index = @([self thrio_getLastIndexByUrl:url].integerValue + 1);
__weak typeof(self) weakself = self;
[viewController thrio_pushUrl:url
index:index
params:params
animated:animated
fromEntrypoint:entrypoint
result:^(NSNumber *idx) {
if (idx && [idx boolValue]) {
__strong typeof(weakself) strongSelf = weakself;
[strongSelf pushViewController:viewController animated:animated];
}
if (result) {
result(idx);
}
} poppedResult:poppedResult];
}
}
這裡主要做了兩件事：
- 調用 thrio_pushUrl。
- 調用 pushViewController，UINavigationViewController 的 pushViewController 將直接在 Native 中 push 一個容器。
其實這裡就已經打開了容器，但是我們還是要看看第一步調用 thrio_pushUrl 做了什麼：
- (void)thrio_pushUrl:(NSString *)url
index:(NSNumber *)index
params:(id _Nullable)params
animated:(BOOL)animated
fromEntrypoint:(NSString * _Nullable)entrypoint
result:(ThrioNumberCallback _Nullable)result
poppedResult:(ThrioIdCallback _Nullable)poppedResult {
NavigatorRouteSettings *settings = [NavigatorRouteSettings settingsWithUrl:url
index:index
nested:self.thrio_firstRoute != nil
params:params];
if (![self isKindOfClass:NavigatorFlutterViewController.class]) { // 當前頁面為原生頁面
[ThrioNavigator onCreate:settings];
}
NavigatorPageRoute *newRoute = [NavigatorPageRoute routeWithSettings:settings];
newRoute.fromEntrypoint = entrypoint;
newRoute.poppedResult = poppedResult;
if (self.thrio_firstRoute) {
NavigatorPageRoute *lastRoute = self.thrio_lastRoute;
lastRoute.next = newRoute;
newRoute.prev = lastRoute;
} else {
self.thrio_firstRoute = newRoute;
}
if ([self isKindOfClass:NavigatorFlutterViewController.class]) {
// 打開 Flutter 頁面的邏輯，4.3.1 中分析
}
}
關鍵是調用 onCreate 函數，至於剩下的業務，是對頁面指針的處理，這裡不做分析了。我們來看看 onCreate 做了什麼事情：
- (void)onCreate:(NavigatorRouteSettings *)routeSettings {
NSDictionary *arguments = [routeSettings toArguments];
[_channel invokeMethod:@"__onOnCreate__" arguments:arguments];
}
這裡是使用 MethodChannel 向 Dart 側發送一條 onOnCreate 消息，Dart 側收到之後會交由相關的事件進行處理：
NavigatorPageObserverChannel() {
_on(
'onCreate',
(pageObserver, routeSettings) => pageObserver.onCreate(routeSettings),
);
}
void _on(String method, NavigatorPageObserverCallback callback) =>
_channel.registryMethodCall(
'__on${method[0].toUpperCase() + method.substring(1)}__', (
[arguments]) {
final routeSettings = NavigatorRouteSettings.fromArguments(arguments);
final pageObservers = ThrioNavigatorImplement.pageObservers;
for (final pageObserver in pageObservers) {
if (pageObserver is NavigatorPageObserverChannel) {
continue;
}
callback(pageObserver, routeSettings);
}
return Future.value();
});
即 Thrio 在這裡完成了生命週期的統一處理，其實實現方式與 FlutterBoost 其實是一致，都是在混合棧跳轉的過程中順帶通知相關事件，至於通信層的具體邏輯這裡也不再具體分析了。另外，Thrio Dart 側的代碼比較簡潔，推薦有興趣的同學自行閱讀。
4.3 打開 Flutter 頁面#
若 viewController 不存在，即業務側要打開的是 Native 頁面：
if (viewController) {
// 4.2
} else {
NSString *entrypoint = @"";
if (ThrioNavigator.isMultiEngineEnabled) {
entrypoint = [url componentsSeparatedByString:@"/"].firstObject;
}
__weak typeof(self) weakself = self;
ThrioIdCallback readyBlock = ^(id _){
ThrioLogV(@"push entrypoint: %@, url:%@", entrypoint, url);
__strong typeof(weakself) strongSelf = weakself;
if ([strongSelf.topViewController isKindOfClass:NavigatorFlutterViewController.class] &&
[[(NavigatorFlutterViewController*)strongSelf.topViewController entrypoint] isEqualToString:entrypoint]) {
// 4.3.1 中分析
} else {
// 4.3.2 中分析
};
[NavigatorFlutterEngineFactory.shared startupWithEntrypoint:entrypoint readyBlock:readyBlock];
};
這裡開頭有一些多引擎的標誌處理，因 Thrio 的多引擎目前還在開發完善中，因此我們本節就不看它多引擎部分的代碼了，看看主體部分吧。根據容器類型，如果當前（最上層）的 viewController 是 FlutterViewController（NavigatorFlutterViewController 是它的一層封裝）就走某邏輯，否則就是 NativeViewController 走另一端邏輯。
因此在要打開的頁面是 Flutter 頁面是，Thrio 和 Flutter Boost 不同，它不會一股腦的去創建容器，而是區分情況處理，這其實也是 Thrio 與 Flutter Boost 最大的不同：
- Flutter 打開 Flutter
- Native 打開 Flutter
4.3.1 Flutter 打開 Flutter#
if ([strongSelf.topViewController isKindOfClass:NavigatorFlutterViewController.class] &&
[[(NavigatorFlutterViewController*)strongSelf.topViewController entrypoint] isEqualToString:entrypoint]) {
NSNumber *index = @([strongSelf thrio_getLastIndexByUrl:url].integerValue + 1);
[strongSelf.topViewController thrio_pushUrl:url
index:index
params:params
animated:animated
fromEntrypoint:entrypoint
result:^(NSNumber *idx) {
if (idx && [idx boolValue]) {
[strongSelf thrio_removePopGesture];
}
if (result) {
result(idx);
}
}];
} else {
// Native 打開 Flutter 4.3.2 中分析
}
這裡又會走到我們 4.2 中分析到 thrio_pushUrl：
- (void)thrio_pushUrl:(NSString *)url
index:(NSNumber *)index
params:(id _Nullable)params
animated:(BOOL)animated
fromEntrypoint:(NSString * _Nullable)entrypoint
result:(ThrioNumberCallback _Nullable)result
poppedResult:(ThrioIdCallback _Nullable)poppedResult {
NavigatorRouteSettings *settings = [NavigatorRouteSettings settingsWithUrl:url
index:index
nested:self.thrio_firstRoute != nil
params:params];
// ...省略 4.2 中的代碼
if ([self isKindOfClass:NavigatorFlutterViewController.class]) {
NSMutableDictionary *arguments = [NSMutableDictionary dictionaryWithDictionary:[settings toArguments]];
[arguments setObject:[NSNumber numberWithBool:animated] forKey:@"animated"];
NSString *entrypoint = [(NavigatorFlutterViewController*)self entrypoint];
NavigatorRouteSendChannel *channel = [NavigatorFlutterEngineFactory.shared getSendChannelByEntrypoint:entrypoint];
if (result) {
[channel onPush:arguments result:^(id _Nullable r) {
result(r && [r boolValue] ? index : nil);
}];
} else {
[channel onPush:arguments result:nil];
}
}
}
核心是使用 MethodChannel 向 Dart 側發送 onPush 消息：
- (void)onPush:(id _Nullable)arguments result:(FlutterResult _Nullable)callback {
[self _on:@"onPush" arguments:arguments result:callback];
}
- (void)_on:(NSString *)method
arguments:(id _Nullable)arguments
result:(FlutterResult _Nullable)callback {
NSString *channelMethod = [NSString stringWithFormat:@"__%@__", method];
[_channel invokeMethod:channelMethod arguments:arguments result:callback];
}
Dart 側收到消息後，根據路由名找到 builder 生成一個 Route，之後會使用 Flutter 的 Navigator 去 push 這個 widget：
void _onPush() => _channel.registryMethodCall('__onPush__', ([arguments]) {
final routeSettings = NavigatorRouteSettings.fromArguments(arguments);
ThrioLogger.v('onPush:${routeSettings.name}');
final animatedValue = arguments['animated'];
final animated =
(animatedValue != null && animatedValue is bool) && animatedValue;
return ThrioNavigatorImplement.navigatorState
?.push(routeSettings, animated: animated)
?.then((it) {
_clearPagePoppedResults();
return it;
});
});
因此，Thrio 這種場景下沒有像 Flutter Boost 那樣去創建一個 FlutterViewController，而是在已有的容器上使用 Navigator 去 push。所以在連續打開 Flutter 頁面這種場景下，Thrio 的內存佔用會低一些。
4.3.2 Native 打開 Flutter#
if ([strongSelf.topViewController isKindOfClass:NavigatorFlutterViewController.class] &&
[[(NavigatorFlutterViewController*)strongSelf.topViewController entrypoint] isEqualToString:entrypoint]) {
// 4.3.1，Flutter 打開 Flutter
} else {
UIViewController *viewController = [strongSelf thrio_createFlutterViewControllerWithEntrypoint:entrypoint];
[strongSelf thrio_pushViewController:viewController
url:url
params:params
animated:animated
fromEntrypoint:entrypoint
result:result
poppedResult:poppedResult];
}
從 Native 頁面打開 Flutter，會先執行 thrio_createFlutterViewControllerWithEntrypoint，顧名思義，其實它就是創建一個 FlutterViewController：
- (UIViewController *)thrio_createFlutterViewControllerWithEntrypoint:(NSString *)entrypoint {
UIViewController *viewController;
NavigatorFlutterPageBuilder flutterBuilder = [ThrioNavigator flutterPageBuilder];
if (flutterBuilder) {
viewController = flutterBuilder();
} else {
viewController = [[NavigatorFlutterViewController alloc] initWithEntrypoint:entrypoint];
}
return viewController;
}
需要注意的是，這裡框架會維護一個對象，如果之前創建過 FlutterViewController，它就會從緩存裡去取出來，否則才會新建一個 FlutterViewController。
之後調用 thrio_pushViewController，這段邏輯和之前分析的 4.2 打開 Native 頁面是一樣的：
- (void)thrio_pushViewController:(UIViewController *)viewController
url:(NSString *)url
params:(id _Nullable)params
animated:(BOOL)animated
fromEntrypoint:(NSString * _Nullable)entrypoint
result:(ThrioNumberCallback _Nullable)result
poppedResult:(ThrioIdCallback _Nullable)poppedResult {
if (viewController) {
NSNumber *index = @([self thrio_getLastIndexByUrl:url].integerValue + 1);
__weak typeof(self) weakself = self;
[viewController thrio_pushUrl:url
index:index
params:params
animated:animated
fromEntrypoint:entrypoint
result:^(NSNumber *idx) {
if (idx && [idx boolValue]) {
__strong typeof(weakself) strongSelf = weakself;
[strongSelf pushViewController:viewController animated:animated];
}
if (result) {
result(idx);
}
} poppedResult:poppedResult];
}
}
- 調用 thrio_pushUrl，同樣是發通知的邏輯，這裡不贅述了。
- 調用 pushViewController，pushViewController 將直接在 Native 中 push FlutterViewController。
Thrio 的源碼當然不止分析的這一點，還有很多索引維護、邊界處理、多引擎邏輯、場景性能優化、生命週期與路由事件通知等邏輯沒有分析到，鑑於篇幅問題，僅分析一下主流程打通框架的脈絡，剩下的過於細節，本文不再一一分析。
下圖是本節 Thrio 打開頁面的流程總結：
雖然框架的實現上我們發現 Thrio 較 Flutter Boost 要複雜一些，但是混合棧的容器更簡潔了 —— 對於連續的 Flutter 頁面（Widget）只需要在當前 FlutterViewController 打開即可，無需去創建新的容器。
5. 多 engine 模式#
多引擎的架構如圖所示：
官方設計是 FlutterEngine 對應四個線程（Task Runner）：
- Platform Task Runner
- UI Task Runner
- GPU Task Runner
- IO Task Runner
因此 Engine 是一個比較重的對象，之前筆者測試過，啟動一個 engine 主線程會耗時 30ms 左右，內存佔用增加 30MB。雖然內存不佔優，但主線程只佔用 30ms 相比 RN 與 Webview 動輒初始化 100~200 ms 是好了不少。
多 engine 可能會帶來一些問題：
- 啟動和運行需要消耗額外資源：這裡可以通過裁剪 engine 來進行優化。
- 冗餘的資源問題：多引擎模式下每個引擎之間的 Isolate 是相互獨立的，在邏輯上這並沒有什麼壞處，但是引擎底層其實是維護了圖片緩存等比較消耗內存的對象。每個引擎都維護自己一份圖片緩存，內存壓力會增大。
- 通信層紊亂問題：多 engine 會使得通信層的邏輯變得尤其複雜，需要設計好通信層的邏輯。這裡可以學習一下 Thrio 的實現。
Thrio 有一套索引維護機制，結合多引擎和多 FlutterViewController，可以定位到每一個頁面的位置：
不可否認，多引擎帶來的隔離是一個好處，至於能帶來多少性能提升，還需要再測試一下。不過，多引擎模式是值得期待的混合開發框架模式。
參考資料：
- Adding Flutter to exist app：https://flutter.dev/docs/development/add-to-app
- 閒魚基於 Flutter 的移動端跨平台應用實踐 http://www.cocoachina.com/cms/wap.php?action=article&id=24859
- 今日頭條 | 讓 Flutter 真正支持 View 級別的混合開發：https://www.msup.com.cn/share/details?id=226
- hellobike/thrio：https://github.com/hellobike/thrio/blob/master/doc/Feature.md
- alibaba/flutter_boost：https://github.com/alibaba/flutter_boost