一、前言

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)始尋找代替方案，Fluter像一束曙光引起了我的注意，之后一直關(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)。

二、什么是 PlatformView?

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é)合。

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

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

三、制作本地插件

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

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

image.png

2、創(chuàng)建IOS 原生MApView

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

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 創(chuàng)建后的標(biāo)識(shí)

int64_t_viewId;

MAMapView*_mapView;

//消息回調(diào)

FlutterMethodChannel* _channel;

}

//在這里只是創(chuàng)建了一個(gè)UILabel

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

if([superinit]) {

/// 創(chuàng)建地圖view與展示邏輯

}

returnself;

}

- (nonnullUIView*)view {

return_mapView;

}

@end

3、創(chuàng)建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;

}

//設(shè)置參數(shù)的編碼方式

-(NSObject *)createArgsCodec{

return [FlutterStandardMessageCodec sharedInstance];

}

//用來(lái)創(chuàng)建 ios 原生view

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

//args 為flutter 傳過(guò)來(lái)的參數(shù)

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

returnmapView;

}

@end

4、創(chuàng)建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 {

//注冊(cè)插件

//注冊(cè) FlutterIosTextLabelFactory

//com.flutter_to_native_lbs.amap 為flutter 調(diào)用此 map 的標(biāo)識(shí)

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

}

@end

5、AppDelegate 中注冊(cè)插件

#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

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

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

image

2、配置Info.plist 文件

NSLocationWhenInUseUsageDescription

定位用來(lái)干什么，需要描述清楚

3、添加依賴的庫(kù)

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

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

18808122-52bbb4dcd0aebe6b.png

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

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

image.png

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

需要引入的資源文件包括：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”按鈕，將資源文件添加到工程中。

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 創(chuàng)建后的標(biāo)識(shí)

int64_t_viewId;

MAMapView*_mapView;

//消息回調(diào)

FlutterMethodChannel* _channel;

}

//在這里只是創(chuàng)建了一個(gè)UILabel

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

if([superinit]) {

///地圖需要v4.5.0及以上版本才必須要打開(kāi)此選項(xiàng)(v4.5.0以下版本，需要手動(dòng)配置info.plist)

[AMapServices sharedServices].enableHTTPS = YES;

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

_viewId= viewId;

///如果您需要進(jìn)入地圖就顯示定位小藍(lán)點(diǎn)，則需要下面兩行代碼

_mapView.showsUserLocation = YES;

_mapView.userTrackingMode = MAUserTrackingModeFollow;

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

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

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

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

//r.locationDotBgColor = [UIColor greenColor];///定位點(diǎn)背景色，不設(shè)置默認(rèn)白色

[_mapView updateUserLocationRepresentation:r];

// [_mapView setMapType:MAMapTypeStandardNavi];

}

returnself;

}

- (nonnullUIView*)view {

return_mapView;

}

@end

最后一步操作 Flutter調(diào)用

body:Container(

child:UiKitView(viewType:"com.flutter_to_native_lbs.amap"), // 設(shè)置標(biāo)識(shí)

)

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

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。