【融雲分析】基於原生程式碼開發Flutter 外掛

融雲RongCloud發表於2019-08-07

Flutter 是谷歌推出的移動 UI 框架,所使用的開發語言是 Dart,可以快速在 iOS 和 Android 上構建高質量的原生使用者介面。 Flutter 可以與現有的程式碼一起工作。在全世界,Flutter 正在被越來越多的開發者和組織使用,並且它是完全免費、開源的。

Flutter 的特點

1.快速開發

毫秒級的熱過載,修改後,應用介面會立即更新。使用豐富的、完全可定製的 widget 在幾分鐘內構建原生介面。

2.富有表現力和靈活的 UI

快速釋出聚焦於原生體驗的功能。分層的架構允許完全自定義,從而實現難以置信的快速渲染和富有表現力、靈活的設計。

3.原生的效能

Flutter 包含了許多核心的 widget,如滾動、導航、圖示和字型等,這些都可以在 iOS 和 Android 上達到原生應用一樣的效能。

但還有一個現實的問題:假如我們有了 iOS 和 Android 的原生 SDK,如果需要 Flutter 版本的,需要我們從頭開始再構建一遍嗎?

答案是不需要,Flutter 可以和原生程式碼互動,支援基於原生程式碼開發外掛,這樣就可以通過 Flutter 呼叫原有 SDK 的介面。

基於原生程式碼開發 Flutter 外掛

一、Flutter 跨平臺原理介紹

下圖是 Flutter 官網對於跨平臺原理的描述,詳情可點選瞭解
圖片描述
通過該圖我們可以看到,Flutter 會通過 MethodChannel 將資料傳遞給 iOS/ Android ,反之 iOS/ Android 也可以通過 MethodChannel 將資料傳回給 Flutter 。

還有一個問題:Flutter 使用的是和 iOS、Android 不同的開發語言,相互能傳遞什麼型別的資料呢?
圖片描述
上面這張表羅列了 Flutter 使用的 Dart 語言與 iOS/Android 可以傳遞的資料型別,從表中我們可以看到,它只能傳遞一些基本的資料型別,比如 bool,int,double,高階的就是 String,List,Map,而且表中指明瞭在各平臺對應的資料型別轉換:如 Dart 的 Map 對應 Android 的 HashMap,對應 iOS 的 NSDictionary 。

二、外掛的基本結構介紹

在終端輸入下面的命令,等待一分鐘左右,Flutter 就會把整個專案框架搭建好。
圖片描述

圖片描述
Flutter Plugin 可簡單理解為上圖中的 Flutter wrapper , iOS wrapper , Android wrapper 三個綠色部分,圖中的雙向箭頭表明了程式碼的呼叫邏輯,這就是為什麼說 Flutter 的外掛可以跨平臺使用。

如何確定 Flutter wrapper 呼叫的是 iOS 的介面還是 Android 的介面?答案是由執行的裝置決定,即執行 iOS 裝置,Flutter wrapper 自動呼叫 iOS wrapper 的介面,Android 也是這樣。

當執行完建立 Plugin 的命令之後,Flutter 會負責在當前目錄建立一個 Plugin專案,具體的目錄含義如下:

android/ : Android wrapper

ios/ :iOS wrapper

lib/ :Flutter wrapper

example/ :demo 根目錄

example/android/ :Android project

example/ios/ :iOS project

example/lib/ :Flutter app

第一次執行需要使用終端進入 Plugin 專案路徑下執行下面命令獲取 Flutter 的依賴。
圖片描述

三、程式碼層面的互動演示

MethodChannel 的建立

Flutter 通過 MethodChannel 與 iOS/Android 進行互動,下面的程式碼展示了三個平臺如何建立 MethodChannel 物件。
圖片描述

通過相同字串建立的 MethodChannel 就可以進行跨平臺的資料互動。

當 Flutter 呼叫介面觸發原生程式碼的時候:

iOS 會觸發的方法
圖片描述

Android 會觸發的方法
圖片描述

兩個平臺一樣,都會獲取 MethodCall 物件 和 FlutterResult 物件。

MethodCall 物件儲存了方法名和引數,通過方法名確定呼叫具體的方法,通過引數獲取具體的資料。

FlutterResult 物件可以將資料返回給 Flutter,下面會講解該物件的使用。

Flutter 與 iOS/Android 資料互動總共三種方式:

1.iOS/Android 不給 Flutter 返回資料
圖片描述

2.iOS/Android 通過 FlutterResult 給 Flutter 返回資料
圖片描述
圖片描述

3.iOS/Android 通過 MethodChannel 給 Flutter 返回資料
圖片描述
圖片描述

通過 FlutterResult 和 MethodChannel 都可以給 Flutter 返回資料,但是兩者有所區別:

FlutterResult 適用於能夠快速返回資料的介面,比如說 IM 連線的回撥或者連線伺服器的回撥。

MethodChannel 適用於不確定什麼時間響應資料的介面,比如說收到訊息的回撥。

MethodChannel 可以替代 FlutterResult 返回資料,但是 FlutterResult 無法替代 MethodChannel。

為了讓開發者和更多平臺便捷的使用融雲IM 功能,融雲 IM Flutter 已經開源,歡迎大家體驗使用。

GitHub 地址:https://github.com/rongcloud/...

Flutter 倉庫地址:https://pub.dev/packages/rong...

融雲IM商用版年中大促火爆進行中

從 7 月 1 日——8 月 31 日,融雲年中大促正在火熱進行中,IM 商用版預存最低享 7 折,更多詳情可以點選登入融雲官網活動頁面檢視。

相關文章