Flutter混合開發二-FlutterBoost使用介紹

前言

《Flutter混合開發專題一》中咱們介紹了Flutter官方提供的混合開發解決方案，可是其存在着一些問題並無解決，好比原生和Flutter頁面疊加跳轉因爲Flutter Engine重複建立而致使內存暴增的問題、Flutter應用中全局變量在各獨立頁面不能共享的問題、iOS平臺內存泄露的問題等等，目前官方在混合開發解決方案上並無花太多的時間去改進優化。

國內不少大廠在去年已經開始研究Flutter，並在現有項目中完成了集成，其中阿里閒魚團隊研究比較早且投入精力比較大，閒魚APP在2018年就已經集成了Flutter，且最初用在了打開最多的商品詳情頁面，前期閒魚爲了解決混合開發的問題開發了一套混合開發插件hybridstackmanager，項目開源地址爲github.com/alibaba-flu…，該方案的一個特色是具備侵入性，須要修改Flutter框架的源碼，且在複雜的頁面場景中有必定侷限性，所以，閒魚團隊接下來開發了新一代混合開發技術方案FlutterBoost，並在今年3月初進行了開源。

FlutterBoost介紹

點擊查看閒魚團隊的文章瞭解FlutterBoost詳細介紹

mp.weixin.qq.com/s/v-wwruadJ…

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才能正常使用。

一、類型轉換錯誤

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>便可；

二、回調方法對應的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問題相同，參考方案一修改便可。

二、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』『存儲』『插件』等獲取更多精準信息，也可回覆『混合開發』獲取阿里、騰訊等國內大廠更多混合開發實踐精選文章。