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 折,更多詳情可以點選登入融雲官網活動頁面檢視。