2017年底因公司業(yè)務(wù)組合部門調(diào)整，新的團(tuán)隊(duì)部分維護(hù)的項(xiàng)目用React Native技術(shù)混合開發(fā)。為適應(yīng)環(huán)境變化，開啟瘋狂RN學(xué)習(xí)之旅，晚上回來啃資料看視頻。可能由于本身對(duì)RN技術(shù)體驗(yàn)不感冒或者在環(huán)境之下強(qiáng)迫學(xué)習(xí)有點(diǎn)不爽。開始尋找代替方案，F(xiàn)luter像一束曙光引起了我的注意，之后一直關(guān)注并利用閑余時(shí)間開始探索。2018年一直學(xué)習(xí)到使用Flutter寫項(xiàng)目，從0.2.0開始到現(xiàn)在1.5版本的發(fā)布，終于開始慢慢的爬出坑位了，但是因?yàn)椴糠挚丶杏X還是不如原生控件好用，因而Flutter提供了PlatformView部件。近期因項(xiàng)目中嚴(yán)重使用依賴地圖，故而做了Fluterr使用原生IOS高德地圖調(diào)研。因?yàn)槲冶旧硎且幻鸻ndroid開發(fā)人員，初學(xué)IOS并記錄下來。
專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)孝感免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千余家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
PlatformView是 flutter 官方提供的一個(gè)可以嵌入 Android 和 iOS 平臺(tái)原生 view 的小部件。
在我們實(shí)際開發(fā)中，我們遇到一些 flutter 官方?jīng)]有提供的插件可以自己創(chuàng)建編寫插件來實(shí)現(xiàn)部分功能，但是原生View在 flutter 中會(huì)遮擋住flutter 中的小部件，比如你想使用高德地圖sdk、視頻播放器、直播等原生控件，就無法很好的與 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)打開開關(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)前往 高德開放平臺(tái)控制臺(tái) 申請(qǐng) iOS Key。
注意：Bundle Identifier需要與申請(qǐng)的時(shí)候填寫的一致
地圖依賴的庫列舉如下：
基礎(chǔ) SDK AMapFoundationKit.framework
第一步：將解壓后的MAMapKit.framework 文件 copy 或 拖拽 到工程文件夾中，左側(cè)目錄選中工程名，在 TARGETS-Build Phases- Link Binary With Libaries 中點(diǎn)擊“+”按鈕，在彈出的窗口中點(diǎn)擊“Add Other”按鈕，選擇工程目錄下的 MAMapKit.framework 文件添加到工程中。
千萬不要忘記將AMapFoundationKit也一起加入工程。
3D地圖正確配置應(yīng)如下圖所示：
需要引入的資源文件包括：AMap.bundle，其中：AMap.bundle 在 MAMapKit.framework 包中，AMap.bundle資源文件中存儲(chǔ)了定位、默認(rèn)大頭針標(biāo)注視圖等圖片，可利用這些資源圖片進(jìn)行開發(fā)。
左側(cè)目錄中選中工程名，在右鍵菜單中選擇Add Files to “工程名”…，從MAMapKit.framework中選擇AMap.bundle文件，并勾選“Copy items if needed”復(fù)選框，單擊“Add”按鈕，將資源文件添加到工程中。
成功跑起來 。。 。
同小程序引入 rpx 單位，可以引入 pt 單位與原尺寸相乘即可。下面是個(gè)適配的小工具
在App設(shè)計(jì)中狀態(tài)欄純色的這種設(shè)計(jì)很常見，但是如果狀態(tài)欄需要為白色的時(shí)候就必須為黑色字體。在Android中已經(jīng)有很多成熟的方案來處理這種情況，那我們現(xiàn)在看看在Flutter中這種情況該怎么處理。
這里的ThemeData即為控制App的主題，primarySwatch設(shè)置即可控制主題的各類顏色，但是這里的顏色是需要MaterialColor，但是純色種的黑色和白色不是MaterialColor。所以不能設(shè)置primarySwatch為Colors.white。
注：MaterialColor包含以下這些
那么就只能使用其他方式設(shè)置主題為白色。即為設(shè)置
此時(shí)我們可以看到App的狀態(tài)欄如下所示（Android）
雖然AppBar變成了白色，但是狀態(tài)欄是灰色顯然不是我們想要的。
嘗試設(shè)置文字顏色，AppBar的Brightness有兩種模式light和dark
這個(gè)和SystemUiOverlayStyle的light和dark剛好相反
然后設(shè)置狀態(tài)欄顏色
設(shè)置為紅色之后，得到以下的樣式，可以看到狀態(tài)欄為紅色了，文字為白色
那么接下來我們只需要將狀態(tài)欄設(shè)置為白色或者透明，狀態(tài)欄文字設(shè)置為黑色。
最后得到以下視圖
注：使用PreferredSize包裹，可以更得心應(yīng)手哦！
SystemUiOverlayStyle在設(shè)置時(shí)其實(shí)有很多系統(tǒng)或者版本的限制
[Flutter]使用主題
flutter設(shè)置沉浸式狀態(tài)欄
）
下面這種情況下，為 InkWell 設(shè)置的 splashColor 不會(huì)生效：
需要用 Material 去除背景色，然后將顏色設(shè)置在 InkWell 外部：
在 Dialog builder 中使用 WillPopScope 禁用返回鍵返回：
注意：使用此方法同時(shí)也會(huì)禁用 iOS 上的手勢(shì)滑動(dòng)返回功能，推薦判斷平臺(tái)后再使用。
修改對(duì)話框中的復(fù)選框狀態(tài)，最簡(jiǎn)便的方法是通過 Element 中的 markNeedsBuild 方法：
當(dāng)然，更推薦的做法是通過 StatefulBuilder ，然后就可以在 Dialog 中調(diào)用 setState 方法了，不過在調(diào)用 setState 時(shí)需要判斷 Dialog 是否已經(jīng)關(guān)閉，否則會(huì)造成 setState() called after dispose() 的錯(cuò)誤，可以通過添加一個(gè)標(biāo)志位來解決，如下：
在 Web 中加載網(wǎng)絡(luò)圖片有時(shí)會(huì)失敗，遇到這樣的報(bào)錯(cuò)： Exception caught by image resource service... ，造成該錯(cuò)誤的原因通常是，圖片跨域了（見 跨域資源共享 ）。最簡(jiǎn)單的解決辦法是， 使用 HTML 渲染加載 ，而不是默認(rèn)的 CanvasKit。
Flutter 中所有的 list 默認(rèn)都是沒有 ScrollBar 的，必須使用 ScrollBar 組件。ScrollBar 組件通過監(jiān)聽 ScrollView 的 ScrollNotification 來刷新位置，所以 List 的長(zhǎng)度必須是固定的。
當(dāng)使用 WebView 等高度不定的組件時(shí)會(huì)出現(xiàn)內(nèi)容被截?cái)嗟那闆r，通?？梢允褂?NestedScrollView 來解決該問題，需要在 WebView 外部嵌套 SingleChildScrollView。
雖然使用了緩存，而且也是用 builder 加載圖片的，但是發(fā)現(xiàn)一個(gè)現(xiàn)象：滑動(dòng)屏幕后圖片短暫消失并重新加載了。圖片高度很高時(shí)這種現(xiàn)象更加明顯，其原因是超出屏幕范圍一定距離的組件被重新渲染了。解決方法是在 ListView 上設(shè)置 cacheExtent 參數(shù):
該參數(shù)的作用是改變超出屏幕高度后繼續(xù)渲染的范圍（以像素為單位），比如設(shè)置成 9999 后意味著超出屏幕 10000 像素以內(nèi)的內(nèi)容都會(huì)被保留下來。
借助 IntrinsicHeight 組件：
另外，IntrinsicHeight 還可以用于 Dialog 或者 BottomSheet 中，使得其中的元素 顯示內(nèi)在元素的高度 ，從而避免元素因?yàn)榧s束的存在而不顯示或者高度太高（比如在使用了 Column 或者 Row 的時(shí)候）。
在通過 Uri 的 queryParameters 獲取 query 參數(shù)時(shí)，發(fā)現(xiàn)有些鏈接會(huì)拋出下面異常：
造成該異常的原因是 Uri 默認(rèn)使用 utf-8 解碼超鏈接字符串，如果鏈接中包含非 utf-8 字符，就會(huì)造成上面的錯(cuò)誤，相關(guān) issue 見： issue #31621 。目前該 issue 處于 open 的狀態(tài)，暫時(shí)的解決辦法是，在所有使用到 queryParameter 的地方用 try..catch 捕捉可能拋出的異常。
Flutter 開發(fā)非常依賴各種官方或第三方的插件，而在使用這些插件時(shí)多少都會(huì)遇到一些問題，大部分問題都可以通過搜索和查找 issue 來解決。這里記錄下一些我在使用部分插件時(shí)遇到的問題及其解決方法。
目前該庫沒有圖片加載完成的回調(diào)（見 issue #545 ），不過我們可以通過在 imageBuilder 中來添加回調(diào)：
這是一個(gè)應(yīng)用內(nèi)更新插件，安卓 10 以上安裝時(shí)需要在 manifest 中添加以下內(nèi)容：
目前功能最強(qiáng)大的 WebView 插件，基本能滿足絕大部分移動(dòng)端網(wǎng)頁加載的需求，而且可定制化程度高。
一般通過 CookieManager 修改 Cookie，攔截請(qǐng)求并修改請(qǐng)求對(duì)象的 Header 不會(huì)生效。
InAppWebViewOptions 的 userAgent 只在 iOS 上生效，而 applicationNameForUserAgent 只在 Android 上生效，所以最好的做法是分平臺(tái)設(shè)置 InAppWebViewOptions ，而且需要注意，由于設(shè)置 userAgent 后會(huì)覆蓋默認(rèn)的 UserAgent，所以如果需要在默認(rèn)的 UserAgent 上添加其它參數(shù)，iOS 上需要通過 InAppWebViewController.getDefaultUserAgent() 獲取默認(rèn) UserAgent 參數(shù)，而 Android 不需要添加。
如果圖片源或者請(qǐng)求是 http 的，為了在 Android 上正常加載請(qǐng)求，必須在 AndroidInAppWebViewOptions 中將 mixedContentMode 設(shè)置為 AndroidMixedContentMode.MIXED_CONTENT_ALWAYS_ALLOW 。
當(dāng)我們想要設(shè)置全屏圖片的時(shí)候，由于默認(rèn)的 Constraint 會(huì)將圖片居中顯示，所以圖片四周會(huì)留有空隙。為了去除這個(gè)限制，我們需要 Xcode 中打開 LaunchScreen.storyboard，然后在 View Controller 的 View 和 LaunchImage 上的 Safe Area 去掉。
具體設(shè)置方法：右側(cè) Inspector 面板 Show the Size inspector 解選 Layout Margins 中的 Safe Area Relative Margins，拖動(dòng)圖片占滿全屏，然后根據(jù) View Controller Scene 的 Warning，更新 Constraint 就可以了。
在集成某些三方庫之后，在使用命令行運(yùn)行 iOS 模擬器的時(shí)候可能會(huì)遇到下面這個(gè)報(bào)錯(cuò)：
這是因?yàn)?iOS 模擬器未來將會(huì)兼容 arm64 架構(gòu)，但是目前還不支持，所以我們需要修改 Build Setting 使得能夠在 x86_64 的模擬器上運(yùn)行，操作步驟見 這里 。
重慶分公司
重慶分公司
