前言
Flutter 作為目前通用的業(yè)界跨平臺解決方案，開辟了一套全新的設計理念鞍陨，通過自研的 UI 框架盆赤，支持高效構建多端平臺上的應用，同時保持著原生應用一樣的高性能客们。
在Flutter項目開發(fā)過程中崇决，對插件的開發(fā)和復用能夠提高開發(fā)效率，降低工程的耦合度底挫。Flutter開發(fā)者可以引入對應插件就可以為項目快速集成相關能力恒傻，從而專注于具體業(yè)務功能的實現。
而在Flutter項目開發(fā)過程中面對通用業(yè)務邏輯拆分建邓、或者需要對原生能力封裝等場景時盈厘，開發(fā)者需要開發(fā)新的組件。
為減少開發(fā)者同時開發(fā)Android和iOS應用的成本官边，提升開發(fā)效率沸手，降低集成地圖SDK的門檻外遇，騰訊位置服務團隊也計劃于業(yè)務實踐中基于原生地圖SDK能力封裝一套地圖Flutter插件，支持Flutter開發(fā)者跨平臺調用地圖SDK接口契吉。
筆者在2019年實習期間跳仿，曾基于當時的最新版本4.2.4的Android地圖SDK，將地圖SDK中一些常用的基礎的地圖操作功能封裝栅隐，構建了一套Android端的地圖SDK Flutter插件塔嬉。
現如今，地圖SDK已經迭代到了4.4.0版本租悄，筆者也將地圖Flutter插件進行了一次相關版本升級谨究。
本篇文章將介紹地圖Flutter插件項目的構建、地圖實例的加載以及demo示例呈現泣棋。對于地圖基礎操作的功能封裝細節(jié)將在后續(xù)文章中進行詳細講解說明胶哲。
地圖Flutter插件項目的構建
地圖Flutter插件項目結構
地圖Flutter插件項目構架的整體結構如下圖所示：
android/ios目錄：原生代碼。對應為Android/iOS Flutter插件目錄潭辈。
lib目錄：Dart 代碼鸯屿。Flutter開發(fā)者將會使用這里的Flutter插件實現的接口。
example目錄：地圖SDK的demo程序把敢。用于驗證Flutter插件的可用性的使用示例寄摆。
地圖Flutter插件依賴配置項
Android端的Flutter插件配置項與官網關于Android地圖SDK的配置說明類似，需要配置android目錄下的兩個文件：build.gradle修赞、AndroidManifest.xml婶恼。
其中Android端的Flutter插件的包名為com.tencent.tencentmap，AndroidManifest.xml文件配置如下：
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.tencent.tencentmap">
<!-- 騰訊地圖 sdk 要求的權限(開始) -->
<!-- 訪問網絡獲取地圖服務 -->
<uses-permission android:name="android.permission.INTERNET" />
<!-- 檢查網絡可用性 -->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<!-- 訪問WiFi狀態(tài) -->
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<!-- 需要外部存儲寫權限用于保存地圖緩存 -->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<!-- 獲取 device id 辨別設備 -->
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<!-- 獲取日志讀取權限柏副，幫助我們提高地圖 sdk 穩(wěn)定性 -->
<uses-permission android:name="android.permission.READ_LOGS" />
<!-- 騰訊地圖 sdk 要求的權限(結束) -->
<!-- 騰訊定位 sdk 要求的權限 (開始) -->
<!-- 通過GPS得到精確位置 -->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<!-- 通過網絡得到粗略位置 -->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<!-- 訪問網絡. 某些位置信息需要從網絡服務器獲取 -->
<uses-permission android:name="android.permission.INTERNET" />
<!-- 訪問WiFi狀態(tài). 需要WiFi信息用于網絡定位 -->
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<!-- 修改WiFi狀態(tài). 發(fā)起WiFi掃描, 需要WiFi信息用于網絡定位 -->
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
<!-- 訪問網絡狀態(tài), 檢測網絡的可用性. 需要網絡運營商相關信息用于網絡定位 -->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<!-- 訪問網絡的變化, 需要某些信息用于網絡定位 -->
<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />
<!-- 訪問手機當前狀態(tài), 需要device id用于網絡定位 -->
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<!-- 騰訊定位 sdk 要求的權限 (結束) -->
<application>
<!-- 如果您key確認無誤勾邦，卻依然授權沒有通過，請檢查您的key的白名單配置 -->
<meta-data
android:name="TencentMapSDK"
android:value="Your key"/>
</application>
</manifest>
本文使用的Android端地圖SDK版本為4.4.0割择。同時眷篇，本文Flutter插件的實現語言是基于Kotlin實現。build.gradle的依賴配置項如下：
dependencies {
implementation 'com.android.support:appcompat-v7:27.1.1'
implementation 'com.tencent.map:tencent-map-vector-sdk:4.4.0'
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
compile "org.jetbrains.kotlin:kotlin-script-runtime:1.2.71"
}
地圖Flutter插件加載地圖實例
Flutter插件在上層UI Dart端與底層Native SDK端之間起到了一層橋接的作用荔泳。
Flutter端與Native端之間通信的流程如下圖所示：
Flutter 跟Native代碼可以通過 MethodChannel 進行通信蕉饼。客戶端通過 MethodChannel 將方法調用和參數發(fā)生給服務端换可，服務端也通過 MethodChannel 接收相關的數據椎椰。
因此，在Flutter插件開發(fā)中沾鳄，MethodChannel與EventChannel是兩個不可避免用到的類慨飘。
用比較通俗的語言來解釋這兩個類的功能：
MethodChannel的作用是傳遞方法調用，例如在flutter端調用native端的方法或native端調用flutter端的方法。MethodChannel主要用于方法調用瓤的。
EventChannel的作用是發(fā)送消息休弃，當native層想通知flutter層一些消息的時候，native層發(fā)送消息圈膏，Flutter接收消息塔猾。EventChannel通常用于數據流通信。
后續(xù)文章將詳細講解MethodChannel與EventChannel在地圖SDK插件中的使用稽坤。
言歸正傳丈甸，本文重點要講解使用PlatformView對地圖實例進行加載的流程。
PlatformView的使用方式是與MethodChannel的使用方式類似的尿褪，具體的加載地圖實例流程如下：
（1）Native端創(chuàng)建TencentMapView
TencentMapView繼承自PlatformView睦擂。
PlatformView為Flutter 1.0版本中的通用組件，區(qū)分為Android和iOS杖玲。在Android平臺上叫做 AndroidView組件顿仇，在iOS平臺，叫UIKitView組件摆马。
因此利用PlatformView構建加載Native SDK中的地圖實例并在PlatformView中維護地圖實例的生命周期臼闻。
TencentMapView中也加入了MethodChannel與EventChannel的注冊邏輯，主要用于地圖的接口進行雙端交互囤采，對于這兩部分的說明將在后續(xù)文章中進行詳細介紹述呐。
Android端的TencentMapView實現如下：
class TencentMapView(context: Context, private val id: Int, private val activityState: AtomicInteger, tencentMapOptions: TencentMapOptions) : PlatformView, Application.ActivityLifecycleCallbacks{
// 加載構建地圖實例
private val mapView = MapView(context, tencentMapOptions)
private val registrarActivityHashCode: Int = TencentmapPlugin.registrar.activity().hashCode()
// 維護地圖實例生命周期
fun setup(){
when(activityState.get()){
STOPPED -> {
mapView.onStop()
}
RESUMED -> {
mapView.onResume()
}
CREATED -> {
mapView.onStart()
}
DESTROYED -> {
mapView.onDestroy()
}
}
// flutter端調用地圖native SDK相關功能的MethodChannel
val mapChannel = MethodChannel(registrar.messenger(), "$mapChannelName$id")
mapChannel.setMethodCallHandler { methodCall, result ->
MAP_METHOD_HANDLER[methodCall.method]
?.with(mapView.map)
?.onMethodCall(methodCall, result) ?: result.notImplemented()
}
// native SDK通知flutter層相關消息的EventChannel
val mapEventChannel = EventChannel(registrar.messenger(), "$mapChannelName$id")
}
}
（2）在插件Native層的入口文件TencentmapPlugin.kt中注冊剛寫好的TencentMapView實例tencentMapView：
@JvmStatic
fun registerWith(registrar: PluginRegistry.Registrar){
//將TencentMapView實例注冊到插件中
registrar.platformViewRegistry().registerViewFactory("com.tencentmap/map", tencentMapView)
}
（3）在Flutter端的dart代碼使用AndroidView，將AndroidView嵌入到TencentMapView中：
class TencentMapView extends StatelessWidget{
const TencentMapView({
this.onTencentMapViewCreated,
});
final MapCreatedCallback onTencentMapViewCreated;
@override
Widget build(BuildContext context) {
if (defaultTargetPlatform == TargetPlatform.android) {
return AndroidView(
viewType: 'com.tencentmap/map',
onPlatformViewCreated: _onViewCreated,
creationParams: {
},
creationParamsCodec: const StandardMessageCodec(),
);
}
}
}
這里要注意的一點是蕉毯，在Android端和Flutter端注冊的viewType中的字符串值必須保持一致市埋，用于唯一標識。在本文中的標識字符串為'com.tencentmap/map'恕刘，將Flutter端的AndroidView與Native端的TencentMapView建立了關聯。
Flutter插件對應Demo示例呈現
Demo示例
demo UI采用了Flutter自支持的Material Design風格的一套UI組件抒倚。
Flutter demo調用地圖SDK展示地圖實例的界面如圖所示：
demo中還實現了地圖基礎操作的相關功能性接口褐着，例如相關覆蓋物的繪制等，示例如下圖所示：
版本升級過程中遇到的小坑
在實際版本升級過程中托呕，原有項目的demo運行起來是白屏含蓉，控制臺打印出如下信息：
[VERBOSE-2:ui_dart_state.cc(157)] Unhandled Exception: ServicesBinding.defaultBinaryMessenger was accessed before the binding was initialized.
If you're running an application and need to access the binary messenger before `runApp()` has been called (for example, during plugin initialization), then you need to explicitly call the `WidgetsFlutterBinding.ensureInitialized()` first.
If you're running a test, you can call the `TestWidgetsFlutterBinding.ensureInitialized()` as the first line in your test's `main()` method to initialize the binding.
#0 defaultBinaryMessenger.<anonymous closure> (package:flutter/src/services/binary_messenger.dart:76:7)
#1 defaultBinaryMessenger (package:flutter/src/services/binary_messenger.dart:89:4)
#2 MethodChannel.binaryMessenger (package:flutter/src/services/platform_channel.dart:140:62)
#3 MethodChannel.invokeMethod (package:flutter/src/services/platform_channel.dart:314:35)
#4 MethodChannel.invokeMapMethod (package:flutter/src/services/platfo<…>
根據控制臺的輸出信息，經過查閱相關資料后找到了原因：該問題由Flutter版本升級導致的重大更改引起的：https://groups.google.com/g/flutter-announce/c/sHAL2fBtJ1Y/m/mGjrKH3dEwAJ
具體解決方法為：在main.dart文件中的main方法中项郊，需要在runApp()前顯式調用如下代碼：
WidgetsFlutterBinding.ensureInitialized();
總結
本文主要介紹了騰訊地圖SDK Flutter插件項目的構建馅扣、地圖實例加載、demo呈現着降，對地圖基礎功能性接口的封裝細節(jié)差油，將會在后續(xù)文章持續(xù)講解。
作者：騰訊位置服務
鏈接：https://blog.csdn.net/weixin_45628602/article/details/115394375
來源：CSDN
著作權歸作者所有。商業(yè)轉載請聯系作者獲得授權蓄喇，非商業(yè)轉載請注明出處发侵。
