Flutter 相對(duì)還是很新的一門(mén)技術(shù)，目前來(lái)看市場(chǎng)上好像阿里對(duì) Flutter 的關(guān)注度最高芽淡，相關(guān)的技術(shù)討論也是最多的。今天看了篇 Flutter 與 Native 混合棧開(kāi)發(fā)的文章谤饭，覺(jué)得 Flutter 好牛逼播歼，當(dāng)然這只是個(gè) Flutter 新手的錯(cuò)覺(jué)～
文章寫(xiě)的很好，簡(jiǎn)單易懂蚓炬，先放出處：在Flutter中嵌入Native組件的正確姿勢(shì)是...松逊，看了文章想親自動(dòng)手實(shí)踐一下。
前提
- 已經(jīng)有了 Flutter 開(kāi)發(fā)環(huán)境
- 已經(jīng)注冊(cè)了百度地圖的開(kāi)發(fā)者密鑰肯夏，并按 教程 導(dǎo)入 SDK
- 創(chuàng)建一個(gè) Flutter Application 工程
開(kāi)始
Flutter 顯示 Native 組件最關(guān)鍵的一個(gè)類是 AndroidView经宏，它可以嵌入到 Widget 視圖里，不過(guò)這種操作代價(jià)比較大驯击， Flutter 官方文檔描述提到盡可能使用 Flutter 的實(shí)現(xiàn)方式來(lái)避免使用它烛恤。
Native 端
初始化百度地圖
首先注意下 AndroidManifest.xml 文件 Application 的 name 參數(shù)為 io.flutter.app.FlutterApplication，所以如果想在 Application 初始化百度地圖 SDK 的話余耽，應(yīng)當(dāng)繼承它來(lái)重寫(xiě) onCreate 方法
新建一個(gè)名為 MainApplication.java 的文件
public class MainApplication extends FlutterApplication {
@Override
public void onCreate() {
super.onCreate();
// 初始化百度地圖 SDK
SDKInitializer.initialize(this);
SDKInitializer.setCoordType(CoordType.BD09LL);
}
}
然后將 AndroidManifest.xml 的 application name 參數(shù)改為 .MainApplication
添加 PlatformViewFactory
寫(xiě)一個(gè) PlatformViewFactory，PlatformViewFactory 的主要任務(wù)是苹熏，在 create() 方法中創(chuàng)建一個(gè) View 并把它傳給 Flutter
public class BMapViewFactory extends PlatformViewFactory {
private MapView mapView;
public BMapViewFactory(MessageCodec<Object> createArgsCodec, MapView mapView) {
super(createArgsCodec);
this.mapView = mapView;
}
@Override
public PlatformView create(final Context context, int i, Object o) {
return new PlatformView() {
@Override
public View getView() {
return mapView;
}
@Override
public void dispose() {
}
};
}
}
添加 ViewRegistrant
添加 ViewRegistrant 類將該插件注冊(cè)到 APP碟贾，ViewType 為 MapView。參數(shù)中新增實(shí)例化的百度地圖 MapView轨域。
public final class ViewRegistrant {
public static void registerWith(PluginRegistry registry, MapView mapView) {
final String key = ViewRegistrant.class.getCanonicalName();
if (registry.hasPlugin(key)) return;
PluginRegistry.Registrar registrar = registry.registrarFor(key);
registrar.platformViewRegistry().registerViewFactory("MapView", new BMapViewFactory(new StandardMessageCodec(), mapView));
}
}
注冊(cè) PlatformViewFactory
在 MainActivity 中實(shí)例化地圖并且注冊(cè)以上添加的 ViewRegistrant 類袱耽。
public class MainActivity extends FlutterActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
MapView mapView = new MapView(this);
ViewRegistrant.registerWith(this, mapView);
}
}
Flutter 端
簡(jiǎn)單實(shí)現(xiàn)一個(gè)只有地圖的界面，實(shí)例化 AndroidView干发，viewType 設(shè)置為剛剛創(chuàng)建的 MapView朱巨，將百度地圖顯示。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new Scaffold(
appBar: AppBar(title: Text("Map"),),
body: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(child: new AndroidView(viewType: 'MapView'))
],
),
),
);
}
}
編譯
如此枉长，地圖正常顯示了冀续。
項(xiàng)目源碼
應(yīng)一些朋友的要求琼讽，放一下項(xiàng)目源碼，歡迎 star
FlutterWithMap
我的博客：時(shí)空路由器
文章原地：Flutter 顯示百度地圖 Native 組件
