引言
Flutter是Google開源的UI工具包，幫助開發者通過一套代碼庫高效建構多平台應用，支援移動、Web、桌面和嵌入式平台。Flutter技術已經成為越來越多行業夥伴重點投入的技術建設方向，國内各大廠也都建設了自己的Flutter工程化體系并服務各自的業務場景。Flutter技術帶來的收益：
- 提升開發效率：雙端一緻，并且熱重載可以幫助快速的修改和調試UI
- 提升傳遞效率：保證多端可同時發版，業務需求可以同一個截止日期完成
- 提升使用者體驗：Flutter提供了雙端一緻的UI并且有媲美Native的性能
- 人力節省：節省設計、測試、開發人力成本
從2020年開始，震坤行移動團隊面臨如下挑戰：
- 由于公司業務的快速發展，包括開發、産品、測試等在内的人員都會同時負責兩個以上的産品，我們希望有解決方案可以提升開發、測試、傳遞效率
- 公司的研發團隊分布在北京、上海，雖然全公司采用了規模化靈活架構SAFe來進行項目管理，但是在移動團隊内産品、測試、設計等還是需要和不同端的同學進行溝通交流，我們希望能降低交流溝通成本
經過移動團隊的技術調研，我們決定全面擁抱Flutter，提升移動端的研發效能。
App全面轉向Flutter的成本和風險較高，目前穩健的做法都是Native漸進式向Flutter遷移，根據業務和技術需求保持Native和Flutter混合并存。本文主要介紹項目中Flutter-Native混合開發相關實踐中Flutter和原生之間的互動：頁面跳轉、資料處理等。
混合技術方案選型
FlutterBoost是一個Flutter插件，它的理念是将Flutter像Webview那樣來使用，可以輕松地為現有原生 應用程式提供Flutter混合內建方案。FlutterBoost采用共享引擎的實作方式，主要思路是由 Native容器Container 通過消息驅動 Flutter⻚面容器Container，進而達到 Native Container 與 Flutter Container的同步目的。Flutter渲染的内容是由Native容器去管道的。FlutterBoost幫助處理⻚面的映射和跳轉， 開發者隻需關心⻚面的名字和參數即可(通常可以是URL)。它具有以下優點:
- 可複用通用型混合方案
- 支援更加複雜的混合模式
- 比如支援主⻚Tab無侵入性方案:不再依賴修改Flutter的方案
- 支援通用⻚面生命周期
- 統一明确的設計概念
全局Router建構
在Native和Flutter混合開發項目中，首先我們需要解決的就是利用FlutterBoost建構一個全局Router，統一管理Native和Native、Native和Flutter，Flutter和Flutter之間的⻚面跳轉。
在Flutter Module中完成新⻚面的開發，需要在 main.dart中定義相關路由，代碼如下:
原生如何打開Flutter頁面（Activity或者Fragment形式）：通過BoostFlutterActivity和FlutterFragment來将Flutter頁面打開。
具體實作：定義FlutterRouter類用來打開Flutter Activity和Fragment，其中 flutterRouter map對應main.dart中定義的所有路由，即flutterRouter map包含的路由通過FlutterBoost調用。在後面我們會将openPageByUrl添加原生路由的處理。
在Flutter子產品中頁面跳轉不使用Flutter原生提供的 Navigator實作跳轉，而采用FlutterBoost來統一處理。FlutterBoost打開頁面的方法為FlutterBoost.singleton.open，該方法會調用plugin中的openPage方法，而openPage最終調用到Native層中FlutterBoost初始化所定義的INativeRouter
在INativeRouter實作中将路由處理也交給之前定義的FlutterRouter，完善openPageByUrl方法來統一處理所有路由，那麼最終FlutterRouter可以用來處理所有Native和Flutter路由。
上述代碼中Native路由的處理針對某些路由進行了特殊處理，目的是為了相容以前的代碼。
全局Router參數處理
在路由跳轉過程中，我們還需要關注如何傳遞和接收參數。參數主要包括基本類型、List資料、對象資料，下面分别介紹各種資料類型如何處理。
1. Native -> Flutter
從Native端參數會放入到SerializableMap中，然後傳遞給Flutter。在Flutter子產品我們可以直接獲得基本類型等，對象資料通過json傳遞獲得
2. Flutter -> Native
如果是簡單的Map參數的話，會直接通過 FlutterRouter 中ARouter處理而不需要特殊處理。如果傳遞是對象的話會涉及到json轉換，在我們項目中是為了保持原來業務代碼而使用到對象資料的傳遞，但是建議後續參數全部采用Map形式傳遞，可以保證 FlutterRouter處理的統一性。
startActivityForResult處理
在Android中我們經常遇到這種場景：啟動另一個Activity并接受傳回的結果。那麼在跨Module中怎麼處理這種情況呢?
1. Native⻚面打開Flutter⻚面并擷取傳回資料
FlutterBoost通過FlutterBoost.singleton.closeCurrent(result: result, exts: exts); 方法來關閉頁面，該方法會調用FlutterBoostPlugin中的closePage方法。
最終result 不為空就會調用setResult方法傳回結果。其中對應result的key是RESULT_KEY = "_flutter_result_";
是以對于startActivityForResult啟動的Flutter頁面，隻需要将傳回值放入result map中即可
2. Flutter⻚面打開Native⻚面并擷取傳回資料
在Flutter中可以直接擷取到打開⻚面之後的傳回值，這裡我們隻需要關注傳回值map中具體的key-value。
在FlutterBoost中Flutter頁面是通過BoostFlutterActivity呈現，追蹤源碼可以看到最終傳回值Map中requestCode和resultCode對應的key為_requestCode__和_resultCode__
MethodChannel互動
Flutter平台特定的API支援不依賴于代碼生成，而是依賴于靈活的消息傳遞的方式:
- 應用的Flutter部分通過平台通道(platform channel)将消息發送到其應用程式的所在的宿主 (iOS或Android)
- 宿主監聽的平台通道，并接收該消息。然後它會調用特定于該平台的API(使用原生程式設計語言)并 将響應發送回用戶端，即應用程式的Flutter部分
在FlutterBoost初始化的時候，可以在BoostLifecycleListener中建立MethodChannel來提供與用戶端通信的管道
在FlutterBoost中建立MethodChannel
總結：
本文主要介紹了Flutter混合開發過程中Native與Flutter之間的互動，包括⻚面調用、參數傳遞、資料交換。在混合開發過程中，我們實作了全局Router在不同Module可以保持一緻性處理，并介紹了⻚面跳轉過程中參數的處理和回調、MethodChannel互動。
在實施Flutter混合開發落地之後，主要體驗如下:
- Flutter在UI編寫上體驗非常好，雖然一開始編寫有點不習慣，但是熟練之後開發效率很高
- 針對複雜清單⻚面，開發體驗和性能都有很大提升
- 減少測試時間，由于雙端一緻測試同學不用每端都仔細測試，特别是UI方面
- 原來項目中有一些功能暫時沒法遷移到Flutter(如第三方UI庫、不支援Flutter的SDK庫等)，在項目中采用原生Activity嵌套Flutter Fragment的形式來解決，但是這無形中增加了原生與Flutter之間的互動工作
- 涉及到與原生互動部分需要兩端共同商定，并且在修改methodchannel等公用部分，需要留意會不會對其他端有影響
作者簡介
李亮，震坤行移動端進階研發工程師， 2019年加入震坤行。
來源-微信公衆号:産品技術團隊
出處:https://mp.weixin.qq.com/s/FzJkLufrADkGQQQVG6mhOw