前言
《Flutter混合開發專題一》中我們介紹了Flutter官方提供的混合開發解決方案，但是其存在著一些問題並沒有解決，比如原生和Flutter頁面疊加跳轉由於Flutter Engine重複建立而導致記憶體暴增的問題、Flutter應用中全域性變數在各獨立頁面不能共享的問題、iOS平臺記憶體洩露的問題等等，目前官方在混合開發解決方案上並沒有花太多的時間去改進優化。
國內很多大廠在去年已經開始研究Flutter，並在現有專案中完成了整合，其中阿里閒魚團隊研究比較早且投入精力比較大，閒魚APP在2018年就已經整合了Flutter，且最初用在了開啟最多的商品詳情頁面，前期閒魚為了解決混合開發的問題開發了一套混合開發外掛hybridstackmanager，專案開源地址為github.com/alibaba-flu…，該方案的一個特點是具有侵入性，需要修改Flutter框架的原始碼，且在複雜的頁面場景中有一定侷限性，因此，閒魚團隊接下來開發了新一代混合開發技術方案FlutterBoost，並在今年3月初進行了開源。
FlutterBoost介紹
點選檢視閒魚團隊的文章瞭解FlutterBoost詳細介紹
FlutterBoost整合
由於FlutterBoost封裝成了外掛，所以整合是非常簡單的，只需要對工程進行少量程式碼接入即可。下面以一個Demo工程為例詳細瞭解一下接入方式。
例子工程
我們有一個原生Android專案FBDemo，需要基於此專案引入Flutter開發新的頁面，我們可以在FBDemo同級目錄建立一個Flutter module專案，取名為flutter_boost_module，將Flutter module專案引入整合到原生專案中，整合方式參考《Flutter混合開發專題一》。這時我們就可以在Flutter module專案中開發新的Flutter頁面了。下面就整合FlutterBoost的方式分步說明
Flutter module專案整合FlutterBoost
在flutter_boost_module專案的pubspec.yaml檔案中新增依賴外掛配置
dependencies:
flutter_boost: ^0.0.411
複製程式碼配置完成後執行flutter packages get命令下載依賴外掛到本地。
安卓原生專案中整合FlutterBoost
Flutter module專案引入FlutterBoost外掛後，在Android studio中同步原生工程，同步完成後專案結構如下
然後我們就可以引入FlutterBoost的安卓工程程式碼了，在app目錄下的build.gradle中新增以下專案依賴
dependencies {
...
implementation project(':flutter_boost')
}
複製程式碼Flutter module專案使用FlutterBoost
假設我們使用Flutter建立兩個頁面Widget：FirstPage和SecondPage。
首先我們需要在main方法中執行的rootWidget中註冊這兩個頁面。
@override
void initState() {
super.initState();
FlutterBoost.singleton.registerPageBuilders({
'flutterbus://flutterFirstPage': (pageName, params, _) {
print("first flutterPage params:$params");
...
return FirstPage();
},
'flutterbus://flutterSecondPage': (pageName, params, _) {
print("second flutterPage params:$params");
...
return SecondPage();
},
});
FlutterBoost.handleOnStartPage();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Boost example',
builder: FlutterBoost.init(),
home: Container());
}
複製程式碼安卓原生專案中使用FlutterBoost
Flutter引擎載入及FlutterBoostPlugin初始化
首先，根據FlutterBoost給的例子我們原生專案的Application需要繼承FlutterApplication，其實這個不是必須的，FlutterApplication中主要是在onCreate方法中初始化載入flutter.so庫，該操作我們可以在適當的地方自己來加即可。
其次，FlutterBoost的example中在自定義的Application的onCreate方法中初始化FlutterBoostPlugin，這個我們可以提取出來放到一個單獨的類裡。
基於以上兩點我實現了一個工具類用來執行FlutterBoost的初始化
public class FlutterMediator {
public static void init(final Application app) {
//此處必須啟動初始化，主要是載入Flutter引擎檔案
FlutterMain.startInitialization(app);
FlutterBoostPlugin.init(new IPlatform() {
@Override
public Application getApplication() {
return app;
}
@Override
public Activity getMainActivity() {
return MainActivity.sRef.get();
}
@Override
public boolean isDebug() {
return true;
}
@Override
public boolean startActivity(Context context, String url, int requestCode) {
Debuger.log("startActivity url="+url);
return PageRouter.openPageByUrl(context,url,requestCode);
}
@Override
public Map getSettings() {
return null;
}
});
}
}
複製程式碼這樣，我們在原生專案中的自定義Application的onCreate方法中只需要呼叫FlutterMediator.init(this);方法即可完成FlutterBoost的初始化了。其中MainActivity應該是一直存在棧底的Activity，一般是我們的首頁。
Flutter頁面對應Native容器
FlutterBoost初始化完成之後，針對Flutter中的FirstPage和SecondPage頁面我們需要在原生中建立對應的Native容器，即FlutterBoost中定義的Container，可以是Activity也可以是Fragment，這裡我們使用Activity實現，
// Flutter中FirstPage對應的Native container
public class FlutterFirstPageActivity extends BoostFlutterActivity {
private int id = 0;
private String name;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Intent intent = getIntent();
if(intent != null) {
String url = intent.getStringExtra("url");
Map map = UrlUtil.parseParams(url);
id = Integer.parseInt(map.get("id").toString());
name = map.get("name").toString();
}
}
@Override
public String getContainerName() {
return PageRouter.FLUTTER_FIRST_PAGE_URL;
}
@Override
public Map getContainerParams() {
Map map = new HashMap();
map.put("id", id);
map.put("name", name);
return map;
}
@Override
public void onRegisterPlugins(PluginRegistry registry) {
GeneratedPluginRegistrant.registerWith(registry);
}
}
複製程式碼FlutterBoost已經為我們實現好了Activity型別的容器BoostFlutterActivity，該類實現了IFlutterViewContainer介面，我們自定義容器時只需要繼承該Activity並實現三個方法即可，其中
getContainerName即是容器的名稱，和Flutter層註冊PageBuilder相對應；getContainerParams為該容器需要傳遞給Flutter層對應Widget的引數，頁面跳轉接收的引數傳遞給Flutter頁面就是在這裡處理，需要將資料包裝到Map中；onRegisterPlugins是為該頁面註冊外掛；
頁面跳轉路由
我們在上面FlutterBoostPlugin初始化的程式碼中看到了一行PageRouter.openPageByUrl(context,url,requestCode);程式碼，這句程式碼是用來處理Flutter頁面根據url開啟另一個頁面的操作。PageRouter是我們原生層定義的一個頁面路由類
public class PageRouter {
public static final String NATIVE_FIRST_PAGE_URL = "flutterbus://nativeFirstPage";
public static final String NATIVE_SECOND_PAGE_URL = "flutterbus://nativeSecondPage";
public static final String FLUTTER_FIRST_PAGE_URL = "flutterbus://flutterFirstPage";
public static final String FLUTTER_SECOND_PAGE_URL = "flutterbus://flutterSecondPage";
public static boolean openPageByUrl(Context context, String url) {
return openPageByUrl(context, url, 0);
}
public static boolean openPageByUrl(Context context, String url, int requestCode) {
try {
Intent intent;
if (url.startsWith(NATIVE_FIRST_PAGE_URL)) {
intent = new Intent(context, FirstNativeActivity.class);
intent.putExtra("url", url);
context.startActivity(intent);
return true;
} else if (url.startsWith(NATIVE_SECOND_PAGE_URL)) {
intent = new Intent(context, SecondNativeActivity.class);
intent.putExtra("url", url);
if(context instanceof Activity) {
((Activity)context).startActivityForResult(intent, requestCode);
}
return true;
} else if(url.startsWith(FLUTTER_FIRST_PAGE_URL)) {
intent = new Intent(context, FlutterFirstPageActivity.class);
intent.putExtra("url", url);
context.startActivity(intent);
return true;
} else if (url.startsWith(FLUTTER_SECOND_PAGE_URL)) {
intent = new Intent(context, FlutterSecondPageActivity.class);
intent.putExtra("url", url);
if(context instanceof Activity) {
((Activity)context).startActivityForResult(intent, requestCode);
}
return true;
} else {
return false;
}
} catch (Throwable t) {
return false;
}
}
}
複製程式碼Flutter頁面和Native頁面跳轉
以上準備工作及頁面路由類定義好之後，我們就可以在Flutter層和Native層呼叫相應的方法根據要跳轉頁面的url執行頁面跳轉操作了，你既可以Native頁面跳轉Native頁面，也可以Native頁面跳轉Flutter頁面，既可以在Flutter頁面跳轉Native頁面，也可以Flutter頁面跳轉Flutter頁面，具體例子如下
Native頁面跳轉Flutter頁面
Native頁面跳轉Flutter頁面其實就是開啟一個Flutter頁面對應的Native容器，我們可以根據路由來進行跳轉操作，比如從MainActivity跳轉到Flutter的FirstWidget頁面，一句程式碼搞定
PageRouter.openPageByUrl(this, PageRouter.FLUTTER_FIRST_PAGE_URL+"?id=123&name=bruce");
複製程式碼以上程式碼中對應的url中帶有引數，很多時候你是不需要傳引數的，這裡只是舉個傳引數給Flutter頁面的例子，即是將id和name值傳到Flutter頁面來使用，具體是如何使用的呢，我們需要在Flutter對應的Native容器FlutterFirstPageActivity中解析出url引數，然後在以下覆蓋方法中包裝到Map中通過PlatformChannel傳遞給Flutter端
@Override
public Map getContainerParams() {
Map map = new HashMap();
map.put("id", id);
map.put("name", name);
return map;
}
複製程式碼Flutter頁面跳轉Native頁面
我們只需要在Flutter端使用FlutterBoost提供的方法進行跳轉即可，比如我需要從FirstWidget跳轉到FirstNativeActivity頁面，該頁面對應的url為“flutterbus://nativeFirstPage”，我們可以執行以下程式碼
FlutterBoost.singleton.openPage("flutterbus://nativeFirstPage", {
"query": {"description": "大家好，我來自First Flutter頁面!!!!!!!!"}
});
複製程式碼其中query對應的值是要傳遞給下一個頁面的引數，不需要也可以不傳。
Flutter頁面跳轉Flutter頁面
這個其實有兩種方式，如果採用FlutterBoost定義的頁面跳轉，那麼就需要使用以下方法
FlutterBoost.singleton.openPage("flutterbus://flutterSecondPage", {});
複製程式碼建議整合FlutterBoost後採用FlutterBoost定義的頁面來使用openPage的方式跳轉。
其實也可以使用Flutter中的Navigator跳轉，方法如下
Navigator.of(context).push(MaterialPageRoute(builder: (context){
return SecondPage(enterType: 1,);
}));
複製程式碼如果兩種跳轉方式混合使用會在頁面返回時出現一定的問題，因為FlutterBoost提供了關閉當前頁面的方法FlutterBoost.singleton.closePageForContext(context);，而使用Navigator跳轉的話該方法是不起作用的，所以我們在Widget頁面中定義了enterType來區分，預設使用FlutterBoost的跳轉方式，如果使用Navigator跳轉Flutter Widget頁面，則需要傳入enterType=1，這樣在返回當前頁面時使用如下方法進行處理
void exitPage(BuildContext context) {
if (enterType == 0) {
FlutterBoost.singleton.closePageForContext(context);
} else {
Navigator.pop(context);
}
}
複製程式碼頁面跳轉的返回值問題
FlutterBoost中實現了Flutter頁面跳轉Native頁面並接收返回值的功能，具體方法為
FlutterBoost.singleton.openPage(
"flutterbus://nativeSecondPage",
{
"query": {"requestCode":1000, "type": "second"}
},
resultHandler: (String key, Map<dynamic, dynamic> result) {
print("==============> key: $key, result: $result");
});
複製程式碼openPage方法中的resultHandler引數就是接收返回值的回撥函式，但是經測試目前該方法存在bug，主要有兩種修復方案
修復方案一
該方案採用Activity傳統的跳轉並返回結果的方法，即Flutter跳轉指定Native頁面在原生PageRouter的openPageByUrl方法中使用如下跳轉方式
if(context instanceof Activity) {
((Activity)context).startActivityForResult(new Intent(context, NativePageActivity.class), requestCode);
}
複製程式碼該跳轉方式FlutterBoost已經實現返回結果處理的整個流程，但是需要修改以下兩處bug才能正常使用。
1、型別轉換錯誤
flutter_boost.dart中的方法onPageResult中的resultData引數是Map<String, dynamic> 型別，而通過PlatformChannel傳過來解析的資料型別為Map<dynamic, dynamic>，所以會報型別轉換錯誤，控制檯會列印這樣一句話
... E/FlutterBoost#: onNativePageResult call error
複製程式碼解決這個問題只需要將onPageResult方法中的resultData引數型別Map<String, dynamic>改為Map<dynamic, dynamic>即可；
2、回撥方法對應的key錯誤
針對1問題，修改Flutter_Boost原始碼後就不會報以上錯誤了，但是接收結果的回撥方法還是走不到，經查發現還存在另一個bug，在我們通過openPage方法開啟頁面時，最終會將回撥函式通過PageResultMediator類的setPageResultHandler方法儲存到一個Map<String,PageResultHandler>物件_handlers中，PageResultMediator類實現如下
typedef void PageResultHandler(String key , Map<dynamic,dynamic> result);
typedef VoidCallback = void Function();
class PageResultMediator{
Map<String,PageResultHandler> _handlers = Map();
void onPageResult(String key , Map<dynamic,dynamic> resultData){
if(key == null) return;
Logger.log("did receive page result $resultData for page key $key");
if(_handlers.containsKey(key)){
_handlers[key](key,resultData);
_handlers.remove(key);
}
}
VoidCallback setPageResultHandler(String key, PageResultHandler handler){
if(key == null || handler == null) return (){};
_handlers[key] = handler;
return (){
_handlers.remove(key);
};
}
}
複製程式碼Map中的key即是我們跳轉頁面對應的url，即上文程式碼中的flutterbus://nativeSecondPage，而在原生頁面中處理完返回資料後通過PlatformChannel方法傳入的key是Native容器對應的uniqueId，具體程式碼如下
所以，最後Flutter中根據這個uniqueId是找不到之前的回撥方法的，因此回撥函式沒有走到。於是對Flutter_Boost原始碼簡單做了修改，將前一個頁面的url放置到onResult方法的Result引數裡，然後取出即可，修改後的程式碼如下
該程式碼塊位於ContainerRecord.java類中
@Override
public void onResult(Map Result) {
Map result = (Map) Result.get("result");
String key = result.get("currentUrl").toString();
NavigationService.onNativePageResult(
genResult("onNativePageResult"),
mUniqueId,
key,
Result,
mContainer.getContainerParams()
);
}
複製程式碼修復方案二
該方案採用FlutterBoost中實現的返回結果處理方式，而不必使用原生的跳轉頁面獲取結果的方式，跳轉頁面時採用普通的Activity跳轉，即
context.startActivity(new Intent(context, NativePageActivity.class));
複製程式碼該方案FlutterBoost同樣有對應的實現，但是依然存在兩個bug。
1、型別轉換錯誤
該問題和方案一的1問題相同，參考方案一修改即可。
2、needResult引數在native端不能獲取的問題
通過研讀FlutterBoost原始碼我們發現，在Flutter端跳轉頁面時如果傳入了resultHandler引數，則會將傳遞給native層的params中新增一個needResult為true的引數，而在native層處理開啟頁面的請求時會先判斷是否需要結果資料，如下程式碼塊
該程式碼位於FlutterBoostPlugin.java類中
public static void openPage(Context context, String url, final Map params, int requestCode) {
...
//Handling page result.
if (needResult(params)){
sInstance.mMediator.setHandler(url, new PageResultHandler() {
@Override
public void onResult(String key, Map resultData) {
NavigationService.onNativePageResult(new MessageResult<Boolean>() {
...
},"no use",key,resultData,params);
}
});
}
sInstance.mPlatform.startActivity(ctx, concatUrl(url, params), requestCode);
}
private Boolean needResult(Map params){
if(params == null) return false;
final String key = "needResult";
if(params.containsKey(key)){
if(params.get(key) instanceof Boolean){
return (Boolean) params.get(key);
}
}
return false;
}
複製程式碼在方法的if語句中會通過needResult方法檢測params中是否含有needResult引數且其值為true，如果為true則會快取結果的回撥到mMediator物件中，但其實這裡是不會獲取到needResult引數的，因為在該openPage呼叫之前已經將Flutter傳入的params做了處理，如下
該方法位於NavigationService_openPage.java類中
private boolean onCall(MessageResult<Boolean> result,String pageName,Map params,Boolean animated){
Map pageParams = null;
int requestCode = 0;
if(params != null && params.get("query") != null) {
pageParams = (Map)params.get("query");
}
if(params != null && params.get("requestCode") != null) {
requestCode = (int)params.get("requestCode");
}
FlutterBoostPlugin.openPage(null,pageName,pageParams,requestCode);
result.success(true);
return true;
}
複製程式碼通過以上程式碼我們會發現pageParams只是從傳入的params中取出了query引數，而忽略了裡面的needResult引數，所以在openPage方法中就從params中找不到needResult引數了。
發現問題之後，我們只需要在openPage方法中增加一個引數boolean needResult，在onCall方法中檢測needResult引數是否存在，存在且為true，則將其傳入openPage即可。
問題修復了，那麼跳轉的Native頁面如果將結果返回給Flutter頁面呢，只需要在Native頁面返回時執行以下操作即可
Map map = new HashMap();
map.put("value", "bruce");
FlutterBoostPlugin.onPageResult(PageRouter.NATIVE_PAGE_URL, map);
複製程式碼以上兩種方案對應的bug修復後，Flutter頁面跳轉Native頁面並獲取返回值的功能就可以正常使用了，期待閒魚團隊能夠及時修復這個問題。
而對於Native頁面跳轉Flutter頁面並返回結果資料的功能，目前Flutter_Boost還沒有實現，通過閱讀原始碼發現有相關的程式碼，但還不完善，也期待閒魚團隊更快的完善這部分功能，畢竟頁面跳轉返回資料是我們經常碰到的場景。
寫在最後
以上就是在現有安卓原生專案中整合Flutter_Boost的方法步驟，總體來看整合和使用起來還是比較簡單的，閒魚團隊也儘可能的避免了整合時對原有程式碼的侵入。由於篇幅有限，文中程式碼貼的不是太完善，如有需要demo的同學可以通過發微信公眾號訊息索取。
關注『Flutter程式設計指南』微信公眾號，公眾號訊息介面回覆『widget』『dart』『儲存』『外掛』等獲取更多精準資訊，也可回覆『混合開發』獲取阿里、騰訊等國內大廠更多混合開發實踐精選文章。
