一、前言

2017年底因公司業務組合部門調整，新的團隊部分維護的項目用React Native技術混合開發。為適應環境變化，開啟瘋狂RN學習之旅，晚上回來啃資料看視頻。可能由于本身對RN技術體驗不感冒或者在環境之下強迫學習有點不爽。開始尋找代替方案，Fluter像一束曙光引起了我的注意，之后一直關注并利用閑余時間開始探索。2018年一直學習到使用Flutter寫項目，從0.2.0開始到現在1.5版本的發布，終于開始慢慢的爬出坑位了，但是因為部分控件感覺還是不如原生控件好用，因而Flutter提供了PlatformView部件。近期因項目中嚴重使用依賴地圖，故而做了Fluterr使用原生IOS高德地圖調研。因為我本身是一名android開發人員，初學IOS并記錄下來。

二、什么是 PlatformView?

PlatformView是 flutter 官方提供的一個可以嵌入 Android 和 iOS 平臺原生 view 的小部件。

在我們實際開發中，我們遇到一些 flutter 官方沒有提供的插件可以自己創建編寫插件來實現部分功能，但是原生View在 flutter 中會遮擋住flutter 中的小部件，比如你想使用高德地圖sdk、視頻播放器、直播等原生控件，就無法很好的與 flutter 項目結合。

Flutter 中嵌套使用ios原生組件的步驟基本上可以描述為：

1、info.plist文件設置

2、 ios 端實現原生組件PlatformView提供原生view

3 、ios 端創建PlatformViewFactory用于生成PlatformView

4、 ios 端創建FlutterPlugin用于注冊原生組件

5 、flutter 平臺嵌入 原生view

三、制作本地插件

1、info.plist文件設置

iOS端的UiKitView目前還只是preview狀態, 默認是不支持的, 需要手動打開開關, 在info.plist文件中新增一行io.flutter.embedded_views_preview為true.

image.png

2、創建IOS 原生MApView

創建類 FlutterMapView 并實現FlutterPlatformView 協議

FlutterMapView.h

#import

#import "Flutter/Flutter.h"

NS_ASSUME_NONNULL_BEGIN

@interface FlutterMapView : NSObject

-(instancetype)initWithWithFrame:(CGRect)frame

viewIdentifier:(int64_t)viewId

arguments:(id _Nullable)args

binaryMessenger:(NSObject*)messenger;

@end

NS_ASSUME_NONNULL_END

FlutterMapView.m

#import "FlutterMapView.h"

@implementationFlutterMapView {

//FlutterIosTextLabel 創建后的標識

int64_t_viewId;

MAMapView*_mapView;

//消息回調

FlutterMethodChannel* _channel;

}

//在這里只是創建了一個UILabel

-(instancetype)initWithWithFrame:(CGRect)frame viewIdentifier:(int64_t)viewId arguments:(id)args binaryMessenger:(NSObject *)messenger{

if([superinit]) {

/// 創建地圖view與展示邏輯

}

returnself;

}

- (nonnullUIView*)view {

return_mapView;

}

@end

3、創建PlatformViewFactory

FlutterMapFactory.h

#import

#import

NS_ASSUME_NONNULL_BEGIN

@interfaceFlutterMapFactory : NSObject

- (instancetype)initWithMessenger:(NSObject*)messager;

@end

NS_ASSUME_NONNULL_END

FlutterMapFactory.m

#import "FlutterMapFactory.h"

#import "FlutterMapView.h"

@implementationFlutterMapFactory{

NSObject*_messenger;

}

- (instancetype)initWithMessenger:(NSObject *)messager{

self= [superinit];

if(self) {

_messenger= messager;

}

returnself;

}

//設置參數的編碼方式

-(NSObject *)createArgsCodec{

return [FlutterStandardMessageCodec sharedInstance];

}

//用來創建 ios 原生view

- (nonnullNSObject *)createWithFrame:(CGRect)frame viewIdentifier:(int64_t)viewId arguments:(id_Nullable)args {

//args 為flutter 傳過來的參數

FlutterMapView *mapView = [[FlutterMapView alloc] initWithWithFrame:frame viewIdentifier:viewId arguments:args binaryMessenger:_messenger];

returnmapView;

}

@end

4、創建Plugin

FlutterMapPlugin.h

#import

#import

NS_ASSUME_NONNULL_BEGIN

@interfaceFlutterMapPlugin :NSObject

@end

NS_ASSUME_NONNULL_END

FlutterMapPlugin.m

#import "FlutterMapPlugin.h"

#import "FlutterMapFactory.h"

@implementationFlutterMapPlugin

+ (void)registerWithRegistrar:(nonnullNSObject *)registrar {

//注冊插件

//注冊 FlutterIosTextLabelFactory

//com.flutter_to_native_lbs.amap 為flutter 調用此 map 的標識

[registrarregisterViewFactory:[[FlutterMapFactory alloc] initWithMessenger:registrar.messenger] withId:@"com.flutter_to_native_lbs.amap"];

}

@end

5、AppDelegate 中注冊插件

#include "AppDelegate.h"

#include "GeneratedPluginRegistrant.h"

#include "FlutterNativePlugin.h"

#include "FlutterMapPlugin.h"

#import

//需要引入AMapFoundationKit.h頭文件

@implementation AppDelegate

- (BOOL)application:(UIApplication*)application

didFinishLaunchingWithOptions:(NSDictionary*)launchOptions {

[GeneratedPluginRegistrant registerWithRegistry:self];

// Override point for customization after application launch.

[FlutterNativePlugin registerWithRegistrar: [self registrarForPlugin:@"FlutterNativePlugin"]];

//本地插件 高德地圖

[FlutterMapPlugin registerWithRegistrar:[self registrarForPlugin:@"FlutterMapPlugin"]];

return [super application:application didFinishLaunchingWithOptions:launchOptions];

}

@end

四、集成IOS高德sdk

1、獲取高德Key

請前往高德開放平臺控制臺申請 iOS Key。

注意：Bundle Identifier需要與申請的時候填寫的一致

image

2、配置Info.plist 文件

NSLocationWhenInUseUsageDescription

定位用來干什么，需要描述清楚

3、添加依賴的庫

地圖依賴的庫列舉如下：

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

18808122-52bbb4dcd0aebe6b.png

千萬不要忘記將AMapFoundationKit也一起加入工程。

3D地圖正確配置應如下圖所示：

image.png

第 2 步：需要引入的資源文件

需要引入的資源文件包括：AMap.bundle，其中：AMap.bundle 在 MAMapKit.framework 包中，AMap.bundle資源文件中存儲了定位、默認大頭針標注視圖等圖片，可利用這些資源圖片進行開發。

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

image.png

4、配置高德Key至AppDelegate.m文件

#import//需要引入AMapFoundationKit.h頭文件……

(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

{

[AMapServices sharedServices].apiKey = @"您的Key";

……

}

5、加載地圖

#import "FlutterMapView.h"

#import

#import

@implementationFlutterMapView {

//FlutterIosTextLabel 創建后的標識

int64_t_viewId;

MAMapView*_mapView;

//消息回調

FlutterMethodChannel* _channel;

}

//在這里只是創建了一個UILabel

-(instancetype)initWithWithFrame:(CGRect)frame viewIdentifier:(int64_t)viewId arguments:(id)args binaryMessenger:(NSObject *)messenger{

if([superinit]) {

///地圖需要v4.5.0及以上版本才必須要打開此選項(v4.5.0以下版本，需要手動配置info.plist)

[AMapServices sharedServices].enableHTTPS = YES;

_mapView= [[MAMapViewalloc]initWithFrame:self.view.bounds];

_viewId= viewId;

///如果您需要進入地圖就顯示定位小藍點，則需要下面兩行代碼

_mapView.showsUserLocation = YES;

_mapView.userTrackingMode = MAUserTrackingModeFollow;

MAUserLocationRepresentation *r = [[MAUserLocationRepresentation alloc] init];

// r.showsAccuracyRing = NO;///精度圈是否顯示，默認YES

r.strokeColor = [UIColor blueColor];///精度圈 邊線顏色, 默認 kAccuracyCircleDefaultColor

r.fillColor = [UIColor redColor];///精度圈 填充顏色, 默認 kAccuracyCircleDefaultColor

//r.locationDotBgColor = [UIColor greenColor];///定位點背景色，不設置默認白色

[_mapView updateUserLocationRepresentation:r];

// [_mapView setMapType:MAMapTypeStandardNavi];

}

returnself;

}

- (nonnullUIView*)view {

return_mapView;

}

@end

最后一步操作 Flutter調用

body:Container(

child:UiKitView(viewType:"com.flutter_to_native_lbs.amap"), // 設置標識

)

成功跑起來 。。 。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的flutter引入高德地图_Flutter笔记-调用原生IOS高德地图sdk的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。