Flutter新銳專家之路：混合開發篇

做者：閒魚技術-正物

本篇是此係列的第二篇，重點介紹如何讓Flutter可以開發，實現業務需求。這部分包括:混合棧的管理，混合下的能力補齊和包管理。

混合棧的管理

引入Flutter以後，咱們首要面臨的問題即是混合棧的管理。如咱們首先實踐的是商品詳情頁，則有一個常見的應用場景:首頁->詳情頁->詳情頁(猜你喜歡點擊)->會話頁->詳情頁(會話頂部點擊)。如何去解決這種Native 與Flutter任意嵌套的問題呢？

解決方案應具備如下特色:

a.每個頁面都有一個VC(Activity)，保證全部基於VC(Activity)生命週期的邏輯(如埋點等)照常工做

b.不一樣的Flutter頁面之間能夠正常通訊，共享數據

c.Native能夠調起任意的Flutter頁面，不管是首次打開仍是以後

d.資源佔用儘量少，性能儘量好

e.用戶體驗要同以前無差別

爲了解決這些問題，設計以下:

a.全部的Flutter頁面公用一個Flutter實例(FlutterViewController for iOS&FlutterNativeView for Android)

​ 其中iOS能夠透過addChildViewController和removeFromParentViewController，直接在FlutterViewController層面複用。

​ Android因爲activity不能add/remove,所以抽取並複用了FlutterNativeView(相對應的FlutterView也是單例)，在不一樣的Activity上覆用。

​ 這種Flutter單例的實現帶來的好處顯而易見。一方面，單個Flutter實例由於位於相同的Isolate，其數據通訊和共享將很容易。另外一方面，引擎的默認實現中，每個Flutter實例會新啓動三個線程(IO,GPU和UI)，帶來了額外的資源使用，單實例能夠避免這個問題。

​ 固然單例的實現也帶來了額外的管理複雜度，但這個相關的複雜度我已經經過插件的方式支持了。

點擊前往查看混合棧管理插件

b.每個Flutter頁面不只是一個FlutterPage，也有一個對應的NativeVC(或Activity)與之相對應

​ 經過惟一的id將其關聯，能夠方便地使Flutter/Native頁面保持同步。如Native頁面退到Idx時，能夠經過Flutter內部的棧回退到對應idx的Flutter頁面。

c.Native和Flutter都基於openUrl來管理頁面跳轉

​ 統一的路由機制能夠統一管理全部頁面跳轉相關邏輯，對業務側提供標準一致的服務。

d.全部的頁面跳轉和動畫都經過Native實現

​ 由於原生(iOS/Android)自帶跳轉動畫，而Flutter內部跳轉也自帶動畫，爲了用戶體驗，禁止Flutter內部跳轉(push/pop)相關動畫，統一由Native接管，這樣用戶就感覺不到差別。

e.使用一個空白Widget做爲RootWidget

​ 以便保證Flutter頁面完整退出時(如回到首頁)，能夠釋放全部的Flutter詳情頁等資源

架構圖以下:

效果圖以下

##待優化部分 1.目前爲了保證頁面跳轉時的正常顯示，前一個頁面是截圖，後一個頁面是真正的Flutter頁面，也就是說每個FlutterWrapperVC(Activity)都保留了一張截圖，帶來了額外的內存消耗。

複用Native組件

當前閒魚Flutter業務全頁面採用Flutter實現，但也有一些Native組件的複用。

經過Channel調用部分中間件

如埋點，網絡請求與解析等只能調用已有的二方中間件，這種狀況下基於Platform Channels去調用。

使用Dart重寫部分中間件

對於一些有標準協議支持(如http)的中間件，如阿里雲提供的基於http的文件上傳服務，能夠經過dart重寫的方式去實現。

經過新Window方式，蓋上已有的Native組件

以下圖所示的浮層和鍵盤上的輸入框，均爲直接複用Native組件。

視頻的實現

Flutter引擎經過Texture的方式，由Native側提供相應的渲染內容(解碼視頻文件得到幀Buffer等)的方式來提供對於視頻的支持。

Flutter的渲染流程略圖

iOS上Flutter視頻渲染邏輯:

Android上Flutter視頻渲染邏輯:

包管理

構建和發佈插件(包)

1.使用下面命令建立插件:

flutter create --template=plugin hybrid_stack_manager
複製代碼

2.開發插件並在example中測試經過 3.完善README.md, CHANGELOG.md，pubspec.yaml，podspec.json，LICENSE等相關文件 4.使用命令驗證併發布

cd root-path-to-your-flutter-package
pub publish
複製代碼

若是出現一個鏈接須要驗證身份，拷貝到瀏覽器訪問便可。

咱們能夠將實現的插件(如網絡請求，混合棧管理等)包，Dart包(阿里雲上傳組件等)，以多種形式引入。下面以上文中的混合棧管理插件hybrid_stack_manager爲例說明下各類包管理方式:

包名+版本

實現後可發佈到https://pub.dartlang.org，再在pubspec.yaml中基於名稱+版本號引入。

此部分包下載後路徑位於:~/.pub-cache/hosted/pub.dartlang.org/hybrid_stack_manager-0.0.2

包名+git信息

也能夠將代碼包上傳到可訪問到的git地址，經過git地址+ref的方式引入。

此部分包下載後路徑位於:~/.pub-cache/git/hybrid_stack_manager-d9f6bdf169683fd8642168ec37c5820940ed344a

包名+路徑

也能夠將代碼放在某一文件夾(建議當前Flutter工程根目錄之下)，經過路徑引入。

寫在後面

本文着重介紹了混合場景下如何去作業務研發。解決這一問題後，接下來就要解決實際業務開發中遇到的各類兼容性/穩定性問題，這些敬請關注本系列的上線篇。

聯繫咱們

若是對文本的內容有疑問或指正，歡迎告知咱們。

閒魚技術團隊是一隻短小精悍的工程技術團隊。咱們不只關注於業務問題的有效解決，同時咱們在推進打破技術棧分工限制（android/iOS/Html5/Server 編程模型和語言的統一）、計算機視覺技術在移動終端上的前沿實踐工做。做爲閒魚技術團隊的軟件工程師，您有機會去展現您全部的才能和勇氣，在整個產品的演進和用戶問題解決中證實技術發展是改變生活方式的動力。

簡歷投遞：guicai.gxy@alibaba-inc.com