Flutter只是 谷歌的移動 UI 框架,在Android開發(fā)中,你可以理解為 嵌套在activity里面的一個view即可。
創(chuàng)新互聯(lián)成立與2013年,先為堯都等服務建站,堯都等地企業(yè),進行企業(yè)商務咨詢服務。為堯都企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。
目前有純flutter開發(fā),還有 flutter,原生混合開發(fā) 兩種模式。。
Flutter是谷歌公司推出的跨終端的開發(fā)框架,支持Android、iOS和WEB終端。1.0版在2018年12月5日發(fā)布,目前的最新版本是1.5,它采用的開發(fā)語言是Dart,Dart也是谷歌開發(fā)的計算機編程語言,語法類似C,是編譯型語言:
hello world例子,打印字符串“Hello World!”:
1、沒有橋接層
React Native、Weex等技術都是跨終端的框架,然而性能跟原生App存在很大差距。這是由于它們的工作原理決定的:
React Native、Weex等技術多了一個橋接層,所以界面渲染會慢一些,由于UI渲染非常頻繁,想要不卡頓,基本上比較難,性能和用戶體驗跟原生代碼有差距。而這恰恰是Flutter的優(yōu)勢所在:
Dart可以被編譯成不同平臺的本地代碼,讓Flutter不通過橋接層直接跟平臺通信,自然性能會快一些。
2、編譯執(zhí)行
JavaScript是解釋執(zhí)行的,Dart是編譯執(zhí)行的,性能誰好一目了然。
3、Flutter Engine虛擬機
Flutter是依靠Flutter Engine虛擬機在iOS和Android上運行的,F(xiàn)lutter Engine使用C/C++編寫,開發(fā)人員通過Flutter框架直接和API在內(nèi)部進行交互,所以具有輸入低延遲和UI渲染高幀速率的特點。除了這特點之外,F(xiàn)lutter還提供了自己的小部件,F(xiàn)lutter小部件是使用從React獲取靈感的現(xiàn)代框架構(gòu)建的。 中心思想是您使用小部件構(gòu)建UI。
窗口小部件根據(jù)其當前配置和狀態(tài)描述了它們的視圖。 當窗口小部件的狀態(tài)發(fā)生更改時,窗口小部件會重建其描述,框架將根據(jù)前面的描述進行區(qū)分,以確定底層呈現(xiàn)樹從一個狀態(tài)轉(zhuǎn)換到下一個狀態(tài)所需的最小更改??梢灾苯釉贠S平臺提供的畫布上進行描繪,也就是一些核心類庫直接放到虛擬機里面,調(diào)用起來更快。
從它的系統(tǒng)結(jié)構(gòu)可以看出,類似安卓的ART(Android Run Time)虛擬機,同樣采用AOT(Ahead of TIme)技術,會在APP安裝時就編譯成機器語言,不再解釋執(zhí)行,從而優(yōu)化了APP運行的性能。
4、自帶渲染引擎
Flutter使用谷歌自己的Skia渲染引擎,而Android系統(tǒng)自帶Skia引擎,iOS平臺上Flutter也會把Skia引擎打包到APP中,從而實現(xiàn)了高效渲染。而React Native通過橋接層訪問原生UI,操作頻繁就容易出性能問題。
綜合所述,F(xiàn)lutter 是性能最接近原生代碼 的一種開發(fā)框架,未來也會是構(gòu)建谷歌Fuchsia應用的主要方式,前途不可限量,唯一的問題就是需要學習一門新的語言:Dart,而有Java或者C#語言基礎的程序員會比較容易學習。
本文對比的是 UIWebView、WKWebView、flutter_webview_plugin(在iOS中使用的是WKWebView)的加載速度,內(nèi)存使用情況。
測試網(wǎng)頁打開的速度,只需要獲取 WebView 在開始加載網(wǎng)頁和網(wǎng)頁加載完成時的時間戳,時間戳的差即為打開網(wǎng)頁的時間
為了使差異更明顯,我們選擇較為復雜的 新浪首頁 進行加載的對比,為了減小網(wǎng)絡對加載速度的影響,我們讓手機連接同一個網(wǎng)絡,分別進行 10 次測試然后取平均值,另外,我們需要關閉 WebView 的緩存,防止緩存對加載速度產(chǎn)生影響
下面使筆者進行 10 次測試所得到的數(shù)據(jù)
結(jié)果讓我有點驚訝,一直以為 WKWebView 會是個王者。結(jié)果看,速度上 WKWebView 略慢一點,不過總體差異不大(該結(jié)果僅僅是測試新浪的結(jié)果,僅供參考啦)
在這里,筆者又加了一個測試,嘗試記錄從 viewController 的 viewDidLoad 到 webview 的 didFinish 時間,測試了新浪的數(shù)據(jù),如下:
UIWebViewA : 4970、3808、3815、4250、3556 avg(4079.8) (加載完所有頁面)
UIWebViewB : 4103、3124、3070、3256、2835 avg(3277.6)(加載sina完畢)
WKWebView : 3672、3032、2892、2912、2739 avg(3049.4)
flutter_webView : 4532、3901、4310、3496、3378 avg(3923.4)
其中可以看到,webView 有兩行,UIWebViewB 的數(shù)據(jù)就是加載 sina 主站的時間;UIWebViewA 的數(shù)據(jù)是因為在加載完 sina 主站之后,新浪又加載了一個 ,所以導致總時間延長,不過即使按照 UIWebViewB 的數(shù)據(jù)來比較,也是 wkWebView 略勝一籌。
此處可以看出 flutter_webView 使用的是 wkwebView,所以它吃虧的主要原因是 flutter 包了一層。
結(jié)論:
速度(didStart - didFinish) UIWebView flutter_webview WKWebView
速度(viewDidLoad - didFinish)WKWebView UIWebView flutter_webview
這里查看內(nèi)存使用的是 xcode 的 debug session 中的 memory。
首先看之前測試時,連續(xù)打開十次新浪的內(nèi)存情況
接著我們在看一下打開淘寶首頁的內(nèi)存情況
從圖上可以看出,WKWebView 在內(nèi)存方面有很大的優(yōu)勢啊,UIWebView 的內(nèi)存是真的傷啊,然后 debug 看了一下 flutter_webView,他使用的就是原生的 webView 。
他相比較原生 WKWebView 的內(nèi)存開銷稍大一點,從測試表現(xiàn)來看,一般大個 30 MB 左右。
結(jié)論:內(nèi)存 WKWebView flutter_webview UIWebView
可以在 html5test 中對瀏覽器的兼容性進行評分,通過測試發(fā)現(xiàn)得分分別如下
因為 flutter 里使用的就是 WK,所以和原生的 WKWebView 一樣都是 444 分,比 UIWebView 的 437 略勝一籌
結(jié)論:兼容性 WKWebView = flutter_webview UIWebView
UIWebView : 速度相比較 WKWebView 稍快一點,但是內(nèi)存是一大硬傷,所以只要條件允許,就不推薦使用了
WKWebView : 速度略慢一點,不過差別不大,總體可以接受。是比UIWebView更好的選擇,推薦使用。
flutter_webView_plugin :在iOS中使用的就是原生的WKWebView,所以總體和 native WKWebView 表現(xiàn)差不多。如果是混編項目中,因為它被包了一層,所以頁面加載上存在一定的劣勢,所以混編項目中仍然推薦使用 WKWebView。不過如果從多端考慮、以及項目可遷移等,那么使用也未嘗不可,就是維護成本要增加一些,需要維護兩套 webView。這個就需要根據(jù)自己的情況自己取舍了。
文/陳爐軍
整理/LiveVideoStack
大家好,我是阿里巴巴閑魚事業(yè)部的陳爐軍,本次分享的主題是Flutter浪潮下的音視頻研發(fā)探索,主要內(nèi)容是針對閑魚APP在當下流行的跨平臺框架Flutter的大規(guī)模實踐,介紹其在音視頻領域碰到的一些困難以及解決方案。
分享內(nèi)容主要分為四個方面,首先會對Flutter有一個簡單介紹以及選擇Flutter作為跨平臺框架的原因,其次會介紹Flutter中與音視頻關系非常大的外接紋理概念,以及對它做出的一些優(yōu)化。之后會對閑魚在音視頻實踐過程中碰到的一些Flutter問題提出了一些解決方案——TPM音視頻框架。最后是閑魚Flutter多媒體開源組件的介紹。
Flutter
Flutter是一個跨平臺框架,以往的做法是將音頻、視頻和網(wǎng)絡這些模塊都下沉到C++層或者ARM層,在其上封裝成一個音視頻的SDK,供UI層的PC、iOS和Android調(diào)用。
而Flutter做為一個UI層的跨平臺框架,顧名思義就是在UI層也實現(xiàn)了一個跨平臺開發(fā)。可以預想的是未Flutter發(fā)展的好的話,會逐漸變?yōu)橐粋€從底層到UI層的一個全鏈路的跨平臺開發(fā),技術人員分別負責SDK和UI層的開發(fā)。
在Flutter之前已經(jīng)有很多跨平臺UI解決方案,那為什么選擇Flutter呢?
我們主要考慮性能和跨平臺的能力。
以往的跨平臺方案比如Weex,ReactNative,Cordova等等因為架構(gòu)的原因無法滿足性能要求,尤其是在音視頻這種性能要求幾乎苛刻的場景。
而諸如Xamarin等,雖然性能可以和原生App一致,但是大部分邏輯還是需要分平臺實現(xiàn)。
我們可以看一下,為什么Flutter可以實現(xiàn)高性能:
原生的native組件渲染以IOS為例,蘋果的UIKit通過調(diào)用平臺自己的繪制框架QuaztCore來實現(xiàn)UI的繪制,圖形繪制也是調(diào)用底層的API,比如OpenGL、Metal等。
而Flutter也是和原生API邏輯一致,也是通過調(diào)用底層的繪制框架層SKIA實現(xiàn)UI層。這樣相當于Flutter他自己實現(xiàn)了一套UI框架,提供了一種性能超越原生API的跨平臺可能性。
但是我們說一個框架最終性能怎樣,其實取決于設計者和開發(fā)者。至于現(xiàn)在到底是一個什么狀況:
在閑魚的實踐中,我們發(fā)現(xiàn)在正常的開發(fā)沒有特意的去優(yōu)化UI代碼的情況下,在一些低端機上,F(xiàn)lutter界面的流暢性是比Native界面要好的。
雖然現(xiàn)在閑魚某些場景下會有卡頓閃退等情況,但是這是一個新事物發(fā)展過程中的必然問題,我們相信未來性能肯定不會成為限制Flutter發(fā)展的瓶頸的。
在閑魚實踐Flutter的過程中,混合棧和音視頻是其中比較難解決的兩個問題,混合棧是指一個APP在Flutter過程中不可能一口氣將所有業(yè)務全部重寫為Flutter,所以這是一個逐步迭代的過程,這期間原生native界面與Flutter界面共存的狀態(tài)就稱之為混合棧。閑魚在混合棧上也有一些比較好的輸出,例如FlutterBoost。
外接紋理
在講音視頻之前需要簡要介紹一下外接紋理的概念,我們將它稱之為是Flutter和Frame之間的橋梁。
Flutter渲染一幀屏幕數(shù)據(jù)首先要做的是,GPU發(fā)出的VC信號在Flutter的UI線程,通過AOT編譯的機器碼結(jié)合當前Dart Runtime,生成Layer Tree UI樹,Layer Tree上每一個葉子節(jié)點都代表了當前屏幕上所需要渲染的每一個元素,包含了這些元素渲染所需要的內(nèi)容。將Layer Tree拋給GPU線程,在GPU線程內(nèi)調(diào)用Skia去完成整個UI的渲染過程。Layer Tree中有PictureLayer和TextureLayer兩個比較重要的節(jié)點。PictureLayer主要負責屏幕圖片的渲染,F(xiàn)lutter內(nèi)部實現(xiàn)了一套圖片解碼邏輯,在IO線程將圖片讀取或者從網(wǎng)絡上拉取之后,通過解碼能夠在IO線程上加載出紋理,交給GPU線程將圖片渲染到屏幕上。但是由于音視頻場景下系統(tǒng)API太過繁多,業(yè)務場景過于復雜。Flutter沒有一套邏輯去實現(xiàn)跨平臺的音視頻組件,所以說Flutter提出了一種讓第三方開發(fā)者來實現(xiàn)音視頻組件的方式,而這些音視頻組件的視頻渲染出口,就是TextureLayer。
在整個Layer Tree渲染的過程中,TextureLayer的數(shù)據(jù)紋理需要由外部第三方開發(fā)者來指定,可以把視頻數(shù)據(jù)和播放器數(shù)據(jù)送到TextureLayer里,由Flutter將這些數(shù)據(jù)渲染出來。
TextureLayer渲染過程:首先判斷Layer是否已經(jīng)初始化,如果沒有就創(chuàng)建一個Texture,然后將Texture Attach到一個SufaceTexture上。
這個SufaceTexture是音視頻的native代碼可以獲取到的對象,通過這個對象創(chuàng)建的Suface,我們可以將視頻數(shù)據(jù)、攝像頭數(shù)據(jù)解碼放到Suface中,然后Flutter端通過監(jiān)聽SufaceTexture的數(shù)據(jù)更新就可以順利把剛才創(chuàng)建的數(shù)據(jù)更新到它的紋理中,然后再將紋理交給SKIA渲染到屏幕上。
然而我們?nèi)绻枰肍lutter實現(xiàn)美顏,濾鏡,人臉貼圖等等功能,就需要將視頻數(shù)據(jù)讀取出來,更新到紋理中,再將GPU紋理經(jīng)過美顏濾鏡處理后生成一個處理后的紋理。按Flutter提供的現(xiàn)有能力,必須先將紋理中的數(shù)據(jù)從GPU讀出到CPU中,生成Bitmap后再寫入Surface中,這樣在Flutter中才能順利的更新到視頻數(shù)據(jù),這樣做對系統(tǒng)性能的消耗很大。
通過對Flutter渲染過程分析,我們知道Flutter底層需要渲染的數(shù)據(jù)就是GPU紋理,而我們經(jīng)過美顏濾鏡處理完成以后的結(jié)果也是GPU紋理,如果可以將它直接交給Flutter渲染,那就可以避免GPU-CPU-GPU這樣的無用循環(huán)。這樣的方法是可行的,但是需要一個條件,就是OpenGL上下文共享。
OpenGL
在說上下文之前,得提到一個和上線文息息相關的概念:線程。
Flutter引擎啟動后會啟動四個線程:
第一個線程是UI線程,這是Flutter自己定義的UI線程,主要負責GPU發(fā)出的VSync信號時候用當前Dart編譯的機器碼和當前運行環(huán)境創(chuàng)建出Layer Tree。
還有就是IO線程和GPU線程。和大部分OpenGL處理解決方案中一樣,F(xiàn)lutter也采取一個線程責資源加載,一部分負責資源渲染這種思路。
兩個線程之間紋理共享有兩種方式。一種是EGLImage(IOS是 CVOpenGLESTextureCache)。一種是OpenGL Share Context。Flutter通過Share Context來實現(xiàn)紋理共享,將IO線程的Context和GPU線程的Context進行Share,放到同一個Share Group下面,這樣兩個線程下資源是互相可見可以共享的。
Platform線程是主線程,F(xiàn)lutter中有一個很奇怪的設定,GPU線程和主線程共用一個Context。并且在主線程也有很多OpenGL 操作。
這樣的設計會給音視頻開發(fā)帶來很多問題,后面會詳細說。
音視頻端美顏處理完成的OpenGL紋理能夠讓Flutter直接使用的條件就是Flutter的上下文需要和平臺音視頻相關的OpenGL上下文處在一個Share Group下面。
由于Flutter主線程的Context就是GPU的Context,所以在音視頻端主線程中有一些OpenGL操作的話,很有可能使Flutter整個OpenGL被破壞掉。所以需要將所有的OpenGL操作都限制在子線程中。
通過上述這兩個條件的處理,我們就可以在沒有增加GPU消耗的前提下實現(xiàn)美顏和濾鏡等等功能。
TPM
在經(jīng)過demo驗證之后,我們將這個方案應用到閑魚音視頻組件中,但改造過程中發(fā)現(xiàn)了一些問題。
上圖是攝像頭采集數(shù)據(jù)轉(zhuǎn)換為紋理的一段代碼,其中有兩個操作:首先是切進程,將后面的OpenGL操作都切到cameraQueue中。然后是設置一次上下文。然后這種限制條件或者說是潛規(guī)則往往在開發(fā)過程中容易被忽略的。而這個條件一旦忽略后果就是出現(xiàn)一些莫名其妙的詭異問題極難排查。因此我們就希望能抽象出一套框架,由框架本身實現(xiàn)線程的切換、上下文和模塊生命周期等的管理,開發(fā)者接入框架以后只需要安心實現(xiàn)自己的算法,而不需要關心這些潛規(guī)則還有其他一些重復的邏輯操作。
在引入Flutter之前閑魚的音視頻架構(gòu)與大部分音視頻邏輯一樣采用分層架構(gòu):
1:底層是一些獨立模塊
2:SDK層是對底層模塊的封裝
3:最上層是UI層。
引入Flutter之后,通過分析各個模塊的使用場景,我們可以得出一個假設或者說是抽象:音視頻應用在終端上可以歸納為視頻幀解碼之后視頻數(shù)據(jù)幀在各個模塊之間流動的過程,基于這種假設去做Flutter音視頻框架的抽象。
咸魚Flutter多媒體開源組件
整個Flutter音視頻框架抽象分為管線和數(shù)據(jù)的抽象、模塊的抽象、線程統(tǒng)一管理和上下文同一管理四部分。
管線,其實就是視頻幀流動的管道。數(shù)據(jù),音視頻中涉及到的數(shù)據(jù)包括紋理、Bit Map以及時間戳等。結(jié)合現(xiàn)有的應用場景我們定義了管線流通數(shù)據(jù)以Texture為主數(shù)據(jù),同時可以選擇性的添加Bit Map等作為輔助數(shù)據(jù)。這樣的數(shù)據(jù)定義方式,避免重復的創(chuàng)建和銷毀紋理帶來的性能開銷以及多線程訪問紋理帶來的一些問題。也滿足一些特殊模塊對特殊數(shù)據(jù)的需求。同時也設計了紋理池來管理管線中的紋理數(shù)據(jù)。
模塊:如果把管線和數(shù)據(jù)比喻成血管和血液,那框架音視頻的場景就可以比喻成器官,我們根據(jù)模塊所在管線的位置抽象出采集、處理和輸出三個基類。這三個基類里實現(xiàn)了剛才說的線程切換,上下文切換,格式轉(zhuǎn)換等等共同邏輯,各個功能模塊通過集成自這些基類,可以避免很多重復勞動。
線程:每一個模塊初始化的時候,初始化函數(shù)就會去線程管理的模塊去獲取自己的線程,線程管理模塊可以決定給初始化函數(shù)分配新的線程或者已經(jīng)分配過其他模塊的線程。
這樣有三個好處:
一是可以根據(jù)需要去決定一個線程可以掛載多少模塊,做到線程間的負載均衡。第二,多線程并發(fā)式能夠保證模塊內(nèi)的OpenGL操作是在當前線程內(nèi)而不會跑到主線程去,徹底避免Flutter的OpenGL 環(huán)境被破壞。第三,多線程并行可以充分利用CPU多核架構(gòu),提升處理速度。
從Flutter端修改Flutter引擎將Context取出后,根據(jù)Context創(chuàng)建上下文的統(tǒng)一管理模塊,每一個模塊在初始化的時候會獲取它的線程,獲取之后會調(diào)用上下文管理模塊獲取自己的上下文。這樣可以保證每一個模塊的上下文都是與Flutter的上下文進行Share的,每個模塊之間資源都是共享可見的,F(xiàn)lutter和音視頻native之間也是互相共享可見的。
基于上述框架如果要實現(xiàn)一個簡單的場景,比如畫面實時預覽和濾鏡處理功能,
1:需要選擇功能模塊,功能模塊包括攝像頭模塊、濾鏡處理模塊和Flutter畫面渲染模塊,
2:需要配置模塊參數(shù),比如采集分辨率、濾鏡參數(shù)和前后攝像頭設置等,
3:在創(chuàng)建視頻管線后使用已配置的參數(shù)創(chuàng)建模塊
4:最后管線搭載模塊,開啟管線就可以實現(xiàn)這樣簡單的功能。
上圖為整個功能實現(xiàn)的代碼和結(jié)構(gòu)圖。
結(jié)合上述音視頻框架,閑魚實現(xiàn)了Flutter多媒體開源組件。
組要包含四個基本組件分別是:
1:視頻圖像拍攝組件
2:播放器組件
3:視頻圖像編輯組件
4:相冊選擇組件
現(xiàn)在這些組件正在走內(nèi)部開源流程。預計9月份,相冊和播放器會實現(xiàn)開源。
后續(xù)展望和規(guī)劃
1:實現(xiàn)開頭所說的從底層SDK到UI的全鏈路的跨端開發(fā)。目前底層框架層和模塊層都是各個平臺各自實現(xiàn),反而是Flutter的UI端進行了跨平臺的統(tǒng)一,所以后續(xù)會將底層也按照音視頻常用做法把邏輯下沉到C++層,盡可能的實現(xiàn)全鏈路跨平臺。
2:第二部分內(nèi)容為開源共建,閑魚開源的內(nèi)容不僅包括拍攝、編輯組件,還包括了很多底層模塊,希望有開發(fā)者在基于Flutter開發(fā)音視頻應用時可以充分利用閑魚開源出的音視頻模塊能力,搭建APP框架,開發(fā)者只要去負責實現(xiàn)特殊需求模塊就可以,盡可能的減少重復勞動。
2017年底因公司業(yè)務組合部門調(diào)整,新的團隊部分維護的項目用React Native技術混合開發(fā)。為適應環(huán)境變化,開啟瘋狂RN學習之旅,晚上回來啃資料看視頻??赡苡捎诒旧韺N技術體驗不感冒或者在環(huán)境之下強迫學習有點不爽。開始尋找代替方案,F(xiàn)luter像一束曙光引起了我的注意,之后一直關注并利用閑余時間開始探索。2018年一直學習到使用Flutter寫項目,從0.2.0開始到現(xiàn)在1.5版本的發(fā)布,終于開始慢慢的爬出坑位了,但是因為部分控件感覺還是不如原生控件好用,因而Flutter提供了PlatformView部件。近期因項目中嚴重使用依賴地圖,故而做了Fluterr使用原生IOS高德地圖調(diào)研。因為我本身是一名android開發(fā)人員,初學IOS并記錄下來。
PlatformView是 flutter 官方提供的一個可以嵌入 Android 和 iOS 平臺原生 view 的小部件。
在我們實際開發(fā)中,我們遇到一些 flutter 官方?jīng)]有提供的插件可以自己創(chuàng)建編寫插件來實現(xiàn)部分功能,但是原生View在 flutter 中會遮擋住flutter 中的小部件,比如你想使用高德地圖sdk、視頻播放器、直播等原生控件,就無法很好的與 flutter 項目結(jié)合。
1、info.plist文件設置
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), 默認是不支持的, 需要手動打開開關, 在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需要與申請的時候填寫的一致
地圖依賴的庫列舉如下:
基礎 SDK AMapFoundationKit.framework
第一步:將解壓后的MAMapKit.framework 文件 copy 或 拖拽 到工程文件夾中,左側(cè)目錄選中工程名,在 TARGETS-Build Phases- Link Binary With Libaries 中點擊“+”按鈕,在彈出的窗口中點擊“Add Other”按鈕,選擇工程目錄下的 MAMapKit.framework 文件添加到工程中。
千萬不要忘記將AMapFoundationKit也一起加入工程。
3D地圖正確配置應如下圖所示:
需要引入的資源文件包括:AMap.bundle,其中:AMap.bundle 在 MAMapKit.framework 包中,AMap.bundle資源文件中存儲了定位、默認大頭針標注視圖等圖片,可利用這些資源圖片進行開發(fā)。
左側(cè)目錄中選中工程名,在右鍵菜單中選擇Add Files to “工程名”…,從MAMapKit.framework中選擇AMap.bundle文件,并勾選“Copy items if needed”復選框,單擊“Add”按鈕,將資源文件添加到工程中。
成功跑起來 。。 。
1、創(chuàng)建MyFlutterView繼承NSObject并遵守FlutterPlatformView協(xié)議
2、實現(xiàn)自定義初始化方法,并實現(xiàn)?FlutterPlatformView協(xié)議方法