Android原生和Flutter使用過程的差異對比（二）

1、常用布局的對比

我們提供的服務(wù)有：成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、鳩江ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的鳩江網(wǎng)站制作公司

使用下來其他組件大致還算方便，但是相對布局而言使用便利程度上Android原生完勝，ConstraintLayout內(nèi)部的所有子View可以設(shè)置互相之間的位置依賴關(guān)系。

而Flutter的Stack組件內(nèi)部的Children只能通過外層包裹 Align后 固定位置，比如 Alignment.topLeft、Alignment.bottomRight 等。遇到復(fù)雜的堆疊布局需要通過外層包裹 Positioned 組件后設(shè)置固定的 top 和 left 距離以達到效果，內(nèi)部子組件之間無法設(shè)置位置關(guān)聯(lián)關(guān)系。

2、一些常用屬性設(shè)置上的差異：

Margin外邊距

Android：直接在布局文件對View設(shè)置android:layout_marginStart、android:layout_marginTop

Flutter：需嵌套 Container 組件并在內(nèi)部設(shè)置具體的 margin 值

Padding內(nèi)邊距

Android：TextView、ImageView、各種Layout都可以直接在屬性上設(shè)置android:paddingStart

Flutter：需嵌套 Padding 組件并在內(nèi)部設(shè)置具體的值

組件的可見性

Android：每個view都可以通過setVisibility來設(shè)置可見、隱藏或者隱藏但占位

Flutter：沒有單獨設(shè)置組件是否顯示的api，只能通過 bool 值控制是否添加該組件

事件監(jiān)聽

Android：常規(guī)的setOnClickListener和setOnLongClickListener設(shè)置單擊和長按事件

Flutter：在需要添加事件監(jiān)聽的組件外層嵌套 InkWell 或 GestureDetector 并設(shè)置 onTap 等

3、生命周期

Android：

Activity和Fragment各自有完整的生命周期鏈路onCreate、onStart、onResume、onPause、onDestroy等

Flutter：

萬物皆組件，組件繼承 WidgetsBindingObserver 并重寫 didChangeAppLifecycleState 函數(shù)進行監(jiān)聽

退回桌面依次執(zhí)行inactive 》= paused，此時界面不可見用戶不可操作，從桌面重新進入app執(zhí)行resumed，狀態(tài)較少如需在某些條件下觸發(fā)特定操作可能要找別的方案，比如發(fā)通知之類的

Flutter與原生通信概述

flutter與原生通信主要有三種方式：MethodChannel、EventChannel、BasicMessageChannel，這三種方式均各有適用的場景：MethodChannel用于native與flutter的方法調(diào)用，EventChannel用于native單向的向flutter發(fā)送廣播消息，BasicMessageChannel用于native與flutter之間的消息互發(fā)。

MethodChannel用于雙方之間的方法互調(diào)，使用步驟是：

1.創(chuàng)建一個MethodChannel對象，傳入MethodChannel名稱。

2.使用setMethodHandle對對方調(diào)用自己的方法進行監(jiān)聽，通過回調(diào)中的MethodCall對象方法名判斷、獲取方法參數(shù)，并且返回調(diào)用結(jié)果。

3.使用invokeMethod來調(diào)用對方的方法，可傳入方法名，方法參數(shù)，以及監(jiān)聽對方的回調(diào)結(jié)果。

以下是示例：

需要注意的是，MethodChannel的名稱需要雙方保持一致，否則就不是同一個MethodChannel了。另外這里的方法調(diào)用并不是像Java里面反射那樣去先找到class示例對象再解析到相應(yīng)的方法，而是將雙方互發(fā)的消息包裝成了MethodCall對象，拿到這個對象后通過MethodCall里面的方法名去判斷要做什么操作，并不是直接就調(diào)用了自身（native或flutter）相對應(yīng)的方法。具體要做什么操作、調(diào)用什么方法還是得自己去調(diào)用和實現(xiàn)。

EventChannel適用于native向flutter發(fā)送廣播消息，只是單向的消息發(fā)送，native發(fā)，flutter收，返過來flutter并不能向native發(fā)送消息。例如native可將定位數(shù)據(jù)不斷的報給flutter，或者錄像數(shù)據(jù)等等，所有基于原生能力產(chǎn)生的數(shù)據(jù)都可以通過EventChannel進行發(fā)送。

步驟：

1.創(chuàng)建一個EventChannel對象，傳入EventChannel名稱。

2.flutter端調(diào)用receiveBroadcastStream進行廣播消息注冊，傳入arguments參數(shù)即為廣播名稱，此參數(shù)是告訴native端你要接受的廣播類型，判別是什么廣播發(fā)送的數(shù)據(jù)。

2.native調(diào)用setStreamHandler方法進行廣播消息監(jiān)聽，onListen回調(diào)里會有一個arguments參數(shù)，這里及為flutter注冊的廣播類型，若flutter端沒有注冊，則native端不會收到這個回調(diào)，也就無法進行消息發(fā)送。收到flutter端的廣播注冊后，根據(jù)arguments可判斷廣播類型，然后根據(jù)EventChannel.EventSink來進行消息發(fā)送，EventSink.success()即可將消息發(fā)送給flutter端。

3.flutter進行廣播注冊會返回一個streamSubscription類型的對象，該對象可以進行消息的停止，native可在onCancel回調(diào)里面收到。

示例如下：

BasicMessageChannel就是比較常用的消息互發(fā)，使用步驟如下：

1.創(chuàng)建BasicMessageChannel對象，傳入BasicMessageChannel名稱。還需傳入編解碼方式（可以自己實現(xiàn)），系統(tǒng)提供了一些列的編解碼方式，后續(xù)會介紹到。

2.使用setMessageHandler方法進行消息監(jiān)聽，也可進行回復(fù)。

3.使用send方法進行消息發(fā)送。

無論哪種方式的消息傳遞，最終都是將自定義數(shù)據(jù)轉(zhuǎn)化為二進制數(shù)據(jù)進行傳遞，flutter提供的編解碼方式分為MethodCodec和MessageCodec兩種，EventChannel和MethodChannel使用的就是MethodCodec，BasicMessageChannel使用的是MessageCodec。MethodCodec其實就是在MessageCodec的基礎(chǔ)上將數(shù)據(jù)包裝了一下，使其轉(zhuǎn)化為MethodCall對象方便使用。

MethodCodec源碼：

MethodCodec提供了兩種方式：JSONMethodCodec和StandardMethodCodec，前一種就是JSON和MethodCall對象之間的互轉(zhuǎn)，后一種則是根據(jù)傳入的數(shù)據(jù)基本類型（String，Integer等）來進行互轉(zhuǎn)。

MessageCodec則提供了四種方式，如下圖，具體就不詳細講述了，看看名字就知道是怎么回事，可以直接去看源碼。最常用和默認的就是StandardMessageCodec方式。

從上面的使用方式可以看出，每一種Channel在創(chuàng)建的時候都需要傳遞一個BinaryMessenger，這個接口可以在FlutterEngine里面拿到，因此需要在FlutterActivity里面實現(xiàn)configFlutterEngine方法里面重寫這個方法。FlutterActivity在attach FlutterEngine之后就會調(diào)用這個configFlutterEngine方法，通過flutterEngine.getPlugins().add(FlutterPlugin)方法可以FlutterPlugin的回調(diào)方法里進行數(shù)據(jù)的初始化和銷毀工作。如下圖

這個回調(diào)方法里的FlutterPluginBinding提供了一些我們可能會用到的對象，如下：

Flutter筆記-調(diào)用原生IOS高德地圖sdk

2017年底因公司業(yè)務(wù)組合部門調(diào)整，新的團隊部分維護的項目用React Native技術(shù)混合開發(fā)。為適應(yīng)環(huán)境變化，開啟瘋狂RN學(xué)習(xí)之旅，晚上回來啃資料看視頻?？赡苡捎诒旧韺N技術(shù)體驗不感冒或者在環(huán)境之下強迫學(xué)習(xí)有點不爽。開始尋找代替方案，F(xiàn)luter像一束曙光引起了我的注意，之后一直關(guān)注并利用閑余時間開始探索。2018年一直學(xué)習(xí)到使用Flutter寫項目，從0.2.0開始到現(xiàn)在1.5版本的發(fā)布，終于開始慢慢的爬出坑位了，但是因為部分控件感覺還是不如原生控件好用，因而Flutter提供了PlatformView部件。近期因項目中嚴重使用依賴地圖，故而做了Fluterr使用原生IOS高德地圖調(diào)研。因為我本身是一名android開發(fā)人員，初學(xué)IOS并記錄下來。

PlatformView是 flutter 官方提供的一個可以嵌入 Android 和 iOS 平臺原生 view 的小部件。

在我們實際開發(fā)中，我們遇到一些 flutter 官方?jīng)]有提供的插件可以自己創(chuàng)建編寫插件來實現(xiàn)部分功能，但是原生View在 flutter 中會遮擋住flutter 中的小部件，比如你想使用高德地圖sdk、視頻播放器、直播等原生控件，就無法很好的與 flutter 項目結(jié)合。

1、info.plist文件設(shè)置

2、 ios 端實現(xiàn)原生組件PlatformView提供原生view

3 、ios 端創(chuàng)建PlatformViewFactory用于生成PlatformView

4、 ios 端創(chuàng)建FlutterPlugin用于注冊原生組件

5 、flutter 平臺嵌入 原生view

iOS端的UiKitView目前還只是preview狀態(tài), 默認是不支持的, 需要手動打開開關(guān), 在info.plist文件中新增一行io.flutter.embedded_views_preview為true.

創(chuàng)建類 FlutterMapView 并實現(xiàn)FlutterPlatformView 協(xié)議

FlutterMapView.h

FlutterMapView.m

FlutterMapFactory.h

FlutterMapFactory.m

FlutterMapPlugin.h

FlutterMapPlugin.m

請前往 高德開放平臺控制臺 申請 iOS Key。

注意：Bundle Identifier需要與申請的時候填寫的一致

地圖依賴的庫列舉如下：

基礎(chǔ) SDK AMapFoundationKit.framework

第一步：將解壓后的MAMapKit.framework 文件 copy 或 拖拽 到工程文件夾中，左側(cè)目錄選中工程名，在 TARGETS-Build Phases- Link Binary With Libaries 中點擊“+”按鈕，在彈出的窗口中點擊“Add Other”按鈕，選擇工程目錄下的 MAMapKit.framework 文件添加到工程中。

千萬不要忘記將AMapFoundationKit也一起加入工程。

3D地圖正確配置應(yīng)如下圖所示：

需要引入的資源文件包括：AMap.bundle，其中：AMap.bundle 在 MAMapKit.framework 包中，AMap.bundle資源文件中存儲了定位、默認大頭針標(biāo)注視圖等圖片，可利用這些資源圖片進行開發(fā)。

左側(cè)目錄中選中工程名，在右鍵菜單中選擇Add Files to “工程名”…，從MAMapKit.framework中選擇AMap.bundle文件，并勾選“Copy items if needed”復(fù)選框，單擊“Add”按鈕，將資源文件添加到工程中。

成功跑起來 。。 。

flutter跳轉(zhuǎn)原生頁面后的穿透問題

現(xiàn)象：

flutter頁面通過present跳轉(zhuǎn)原生頁面后，原生頁面上的點擊會首先響應(yīng)下面的flutter頁面中的內(nèi)容（比如按鈕什么的）。

這是flutter框架一直存在的一個bug。在github上有相關(guān)的issue。

原因推測：

推測是flutter對控制器（或者view）加了分類，重寫了控制器的點擊事件，用來計算是否在對應(yīng)的點擊位置有flutter響應(yīng)事件。沒有的話再扔出去點擊事件。

解決方案1：

在原生控制器中，加入點擊事件的幾個方法的空實現(xiàn)，用以覆蓋flutter框架中的實現(xiàn)：

-(void)touchesBegan:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{

}

-(void)touchesMoved:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{

}

-(void)touchesCancelled:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{

}

-(void)touchesEnded:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{

}

讓事件不被flutter截獲即可。

解決方案2：

直接切換window的根控制器到原生控制器即可。別忘暫時保存flutter控制器。

在返回時再切換回flutter中。

解決方案3：

在flutter跳轉(zhuǎn)到原生頁面之前，在flutter中加上一個蒙層，用來隔絕手勢往flutter下面的view傳遞。原生頁面返回flutter時再移除這個蒙層。

本文題目：flutter原生定位,flutter 原生view
本文URL：http://sd-ha.com/article42/dseshhc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、用戶體驗、靜態(tài)網(wǎng)站、手機網(wǎng)站建設(shè)、ChatGPT、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)