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

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

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到德保網(wǎng)站設(shè)計(jì)與德保網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、國(guó)際域名空間、雅安服務(wù)器托管、企業(yè)郵箱。業(yè)務(wù)覆蓋德保地區(qū)。

PlatformView是 flutter 官方提供的一個(gè)可以嵌入 Android 和 iOS 平臺(tái)原生 view 的小部件。

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

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

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

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

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

5 、flutter 平臺(tái)嵌入 原生view

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

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

FlutterMapView.h

FlutterMapView.m

FlutterMapFactory.h

FlutterMapFactory.m

FlutterMapPlugin.h

FlutterMapPlugin.m

請(qǐng)前往 高德開(kāi)放平臺(tái)控制臺(tái) 申請(qǐng) iOS Key。

注意：Bundle Identifier需要與申請(qǐng)的時(shí)候填寫(xiě)的一致

地圖依賴的庫(kù)列舉如下：

基礎(chǔ) SDK AMapFoundationKit.framework

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

千萬(wàn)不要忘記將AMapFoundationKit也一起加入工程。

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

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

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

成功跑起來(lái) 。。 。

Flutter 獲取App的版本號(hào)等信息

通過(guò)使用插件 package_info 可以獲取到當(dāng)前APP的包名，版本名，版本號(hào)等信息。

修改+號(hào)后的構(gòu)建號(hào)，+號(hào)前的版本號(hào)。

在android和ios原生(ios必須打包)中能發(fā)現(xiàn)version變化

要使用這個(gè)插件，首先在工程的pubspec.yaml文件中加入對(duì)這個(gè)插件的依賴：

flutter 多語(yǔ)言配置--中文

上一篇講到如果解決ios長(zhǎng)按輸入框報(bào)錯(cuò)的問(wèn)題，但是最終沒(méi)有達(dá)到我們的要求，因?yàn)槲覀兿雽?shí)現(xiàn)中文的提示，那么本篇文章講講如何來(lái)實(shí)現(xiàn)多語(yǔ)言配置；

1.首先在pubspec.yaml的dependencies下加入這個(gè)

flutter_localizations:

sdk: flutter

如圖：

2.然后在MaterialApp設(shè)置一下localizationsDelegates如圖:

3.寫(xiě)一個(gè)類繼承一下CupertinoLocalizations，在項(xiàng)目中 我這個(gè)類名叫ChineseCupertinoLocalizations(沒(méi)錯(cuò)，就是localizationsDelegates中的第三個(gè))，如圖：

上次提到報(bào)錯(cuò)的原因就是因?yàn)閏utButtonLabel，copyButtonLabel，pasteButtonLabel，selectAllButtonLabel 這幾個(gè)按鈕沒(méi)有實(shí)現(xiàn)，所以繼承CupertinoLocalizations一定要為這幾個(gè)按鈕賦值，這里是那種語(yǔ)言，那么，賦值就對(duì)應(yīng)那種語(yǔ)言，同時(shí)要注意locale.languageCode也要填寫(xiě)，如果你是中文，那么locale.languageCode =='zh';

4.在ios工程中，在項(xiàng)目的info設(shè)置語(yǔ)言環(huán)境

添加?Localization native development region---china

添加一個(gè)Localizations 為array類型的，并且設(shè)置值為?Chinese (simplified)

效果圖：（ 注意：請(qǐng)把手機(jī)環(huán)境調(diào)試成中文的語(yǔ)言環(huán)境 ）

Android?

ios 效果圖

我公司用flutter做了一個(gè)《柚品生活》的app，感興趣的朋友可以去看看，Android和ios都已經(jīng)上架了

最后附上GitHub項(xiàng)目地址 GitHub - hxxsocket/flutter_lg_demo: flutter多語(yǔ)言配置之中文

Flutter設(shè)置APP版本與構(gòu)建版本

當(dāng)一個(gè)純Flutter APP開(kāi)發(fā)完成，我們要打包發(fā)布到App Store和各大安卓市場(chǎng)，這時(shí)候我們需要設(shè)置APP的版本號(hào)。

如果我們?cè)谑褂迷鷌OS或者Android開(kāi)發(fā)的時(shí),我們會(huì)在info.plist中設(shè)置 version 和 build 或是在build.gradle中設(shè)置 versionName 和 versionCode ,他們分別表示APP的版本和構(gòu)建版本。

但是我們?cè)谑褂肍lutter管理APP版本時(shí)，打開(kāi) pubspec.yaml 只看到一個(gè) version 字段。這時(shí)候我們應(yīng)該怎么設(shè)置APP的 version 和 build 呢？

我們?cè)趐ub上隨便找一個(gè)Flutter的組件，例如官方的 camera ,我們可以看到截止目前為止最新的版本為： camera: ^0.5.2+1 ?？吹竭@里，我想大家都明白了，Dart采用的是加號(hào)式的版本描述方式， + 前面是版本號(hào)， + 后面是當(dāng)前版本的build號(hào)。所以我們?cè)O(shè)置APP的版本號(hào)和build次數(shù)，在這里設(shè)置即可，例如： version: 1.2.0+1 。

當(dāng)我們新建一個(gè)Flutter工程的時(shí)候，我們分別使用Xcode和Android Studio打開(kāi)iOS和Android的工程可以看到，iOS中的 version 和 build 的值分別為 FLUTTER_BUILD_NAME 和 FLUTTER_BUILD_NUMBER ：

同樣我們打開(kāi)Android工程可以看到有如下定義：

事實(shí)上，F(xiàn)lutter在編譯的時(shí)候會(huì)生成 ios/Flutter/Generated.xcconfig 和 android/local.properties 文件。這兩個(gè)文件由Flutter編譯自動(dòng)生成，不可更改。記錄了包含SDK路徑或者文件路徑，版本信息，環(huán)境配置（release/debug）等信息。原生工程獲取版本信息的變量就定義在這兩個(gè)文件里面。

Flutter 文件路徑

path_provider是flutter提供的一個(gè)獲取應(yīng)用存儲(chǔ)路徑的插件，它封裝了統(tǒng)一的api來(lái)獲取Android和ios兩個(gè)平臺(tái)的應(yīng)用存儲(chǔ)路徑，提供的api如下：

getTemporaryDirectory()：獲取應(yīng)用臨時(shí)文件夾，該文件夾用來(lái)保存應(yīng)用的緩存，可以隨時(shí)刪除用于清緩存，對(duì)應(yīng)于Android的getCacheDir()和ios的NSTemporaryDirectory()；

getApplicationDocumentsDirectory()：獲取應(yīng)用安裝路徑，在應(yīng)用被卸載的時(shí)候刪除，對(duì)應(yīng)Android的AppDate目錄和iOS的NSDocumentDirectory目錄；

getExternalStorageDirectory()：獲取存儲(chǔ)卡目錄，僅支持Android；

我們通過(guò)File和Directory來(lái)創(chuàng)建文件和文件夾時(shí)首先要獲取到應(yīng)用的相關(guān)路徑，不然會(huì)報(bào)錯(cuò)；

File對(duì)象和Directory對(duì)象封裝在dart:io中，使用時(shí)需要先引入該庫(kù)：

Directory對(duì)象提供listSync()方法獲取文件夾里的內(nèi)容，該方法返回一個(gè)數(shù)組；

文件和文件夾都通過(guò)delete刪除，delete異步，deleteSync同步；如果一個(gè)文件夾是非空的刪除會(huì)報(bào)錯(cuò)，刪除非空文件夾需要先清空該文件夾：

flutter對(duì)json序列化需要引入 dart:convert 庫(kù)：

通過(guò)jsonEncode/jsonDecode來(lái)轉(zhuǎn)換json對(duì)象：

// 將test目錄下的info.json復(fù)制到test2目錄下的info2.json中

引入包archive包：

壓縮：

壓縮前使用ZipFileEncoder先聲明處理壓縮的對(duì)象，調(diào)用該對(duì)象的zipDirectory方法壓縮文件，該方法接受兩個(gè)參數(shù)，第一個(gè)是要壓縮文件/文件夾的路徑，第二個(gè)是壓縮包的保存路徑；

解壓：

flutter運(yùn)行時(shí)提示下面錯(cuò)誤，請(qǐng)問(wèn)如何解決？

一般這樣的問(wèn)題都是Flutter內(nèi)部導(dǎo)致的問(wèn)題，所以優(yōu)先建議命令執(zhí)行：flutter clean，然后再次執(zhí)行操作。

文章題目：flutterinfo的簡(jiǎn)單介紹
URL網(wǎng)址：http://sd-ha.com/article38/dsihcsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、網(wǎng)站內(nèi)鏈、網(wǎng)站營(yíng)銷、搜索引擎優(yōu)化、網(wǎng)站策劃、標(biāo)簽優(yōu)化

廣告

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