2017年底因公司業(yè)務(wù)組合部門調(diào)整，新的團(tuán)隊部分維護(hù)的項目用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部件。近期因項目中嚴(yán)重使用依賴地圖，故而做了Fluterr使用原生IOS高德地圖調(diào)研。因為我本身是一名android開發(fā)人員，初學(xué)IOS并記錄下來。
網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了錦江免費建站歡迎大家使用！
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), 默認(rèn)是不支持的, 需要手動打開開關(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資源文件中存儲了定位、默認(rèn)大頭針標(biāo)注視圖等圖片，可利用這些資源圖片進(jìn)行開發(fā)。
左側(cè)目錄中選中工程名，在右鍵菜單中選擇Add Files to “工程名”…，從MAMapKit.framework中選擇AMap.bundle文件，并勾選“Copy items if needed”復(fù)選框，單擊“Add”按鈕，將資源文件添加到工程中。
成功跑起來 。。 。
flutter用一個插件進(jìn)行icloud。
拓展資料：為何flutter構(gòu)建的App體積較大？
細(xì)心的開發(fā)者會發(fā)現(xiàn)flutter構(gòu)建的App體積比native的大一些，是什么原因造成App體積大呢？
其實flutter 在release時App體積和native的大小差不多，而debug時體積通常會大。debug版本體積較大是為了Hot reload和快速編譯。如果有flutter開發(fā)經(jīng)驗的朋友都體驗過，如果您修改一下App的背景顏色，只需save一下就可以立刻看到修改后效果。我稱之為“像藝術(shù)家一樣在創(chuàng)造App”，因此為了實現(xiàn)這些目標(biāo)，提高開發(fā)的效率，debug將占用全部資源。而當(dāng)我們構(gòu)建release版時，flutter又會采用AOT策略，提高App運行效率，release版只打包必需的資源，因而體積又會減少。
另外，flutter團(tuán)隊也一直在尋找減小程序大小的方法。
標(biāo)準(zhǔn)的Flutter App工程，包含標(biāo)準(zhǔn)的Dart層與Native平臺層
Flutter平臺插件工程，包含Dart層與Native平臺層的實現(xiàn)
Flutter純Dart插件工程，僅包含Dart層的實現(xiàn)，往往定義一些公共Widget
參考資料:
針對日常不同的需求，我們時常需要自定義 Dialog ，而小菜在嘗試過程中遇到一些小問題，簡單記錄總結(jié)一下；
小菜在自定義含有文本框的 Dialog 時，文本框獲取焦點時，軟鍵盤會部分遮擋對話框，但當(dāng)小菜替換為 AlertDialog 時，文本框獲取焦點時，對話框會向上浮動，避免軟鍵盤遮擋；
對于含有文本框的自定義 Dialog ，小菜在最外層使用的是 Material 嵌套，小菜通過采用 Scaffold 來嵌套處理，默認(rèn) Scaffold 中 resizeToAvoidBottomPadding / resizeToAvoidBottomInset 為 true ，當(dāng)設(shè)置為 false 時，文本框獲取焦點時，依舊會被軟鍵盤遮擋；因為在固定情景可以配合 resizeToAvoidBottomPadding 實現(xiàn)是否被軟鍵盤遮擋效果；
resizeToAvoidBottomPadding 主要用于自身 Widget 是否避免被其他窗口遮擋；其中小菜查資料介紹在 Flutter 1.1.9 之后更推薦使用 resizeToAvoidBottomInset ；
小菜自定義一個可以多選 item 的 Dialog ，但 Dialog 中并沒有狀態(tài)更新的 State ，如何進(jìn)行 Dialog 中狀態(tài)更新呢？
小菜之前在 showDialog 時直接創(chuàng)建了 TypeListDialog ，此時是無狀態(tài)的，當(dāng) WidgetBuilder 創(chuàng)建一個 StatefulBuilder 有狀態(tài)的構(gòu)造器即可，可以將 state 傳遞到 Dialog 中；
小菜在自定義 Dialog 時如何在一個回調(diào)方法中傳遞多個參數(shù)？
小菜在 Dialog 的回調(diào)方法中傳遞兩個 List ，而在接收回調(diào)方法中匹配兩個參數(shù)即可；小菜簡單看作是一個函數(shù)方法；
小菜在重寫 AppBar 時，如何取消默認(rèn)的返回按鈕？
取消 AppBar 前面的返回圖標(biāo)有多種方式；
自定義 Dialog 案例源碼
小菜對于 Flutter 的應(yīng)用還不夠熟悉，很多常用的場景會處理的很不到位，小菜會對日常的小問題進(jìn)行簡單記錄，逐步學(xué)習(xí)；如有錯誤，請多多指導(dǎo)！
重慶分公司
重慶分公司
