干货 | Flutter 地图在携程的最佳实践

作者简介

Leo，携程高级移动开发工程师，关注跨端技术，致力于高效、高性能开发。

Jarmon，携程高级移动开发工程师，专注 Flutter、iOS 开发。

一、背景

随着各种多端技术的蓬勃发展，项目主体从纯 Native 项目，到 Native+RN，到现在的 Native+RN+Flutter。基于我们的业务都在 Flutter 技术栈上面，这要求我们需要嵌套展示地图。目前，实现嵌套展示地图的主要方案有二个：

接入官方提供的 Flutter 地图插件，主要面临的问题有：

• 官方提供的插件成熟度不够，有一些 Native 已有的 API 在 Flutter 上不支持；

• 目前接入 Flutter 地图插件的应用很少，我们需要去蹚雷。

• 由于官方适配的是纯 Flutter 项目，混合工程可能遇到很多未知棘手问题。

直接在 Flutter 页面上展示 Native 的地图：

• Native 地图成熟，不会遇到很大的坑；

• 主要问题在于业务在 Flutter上，Flutter 需要大量的和地图组件进行交互、请求数据、联动。需要通过大量的桥方法去传递操作数据；

• 要嵌套 Native 地图需要定制容器，Android 和 IOS 上各自得实现一遍桥、容器和地图逻辑，增加了维护成本。

考虑维护成本、权衡再三我们还是选择接入 Flutter 地图插件。为了能更好的定制一些 API 和更快速的修复一些官方没有及时更新的问题。我们采用的是源码接入 Flutter 地图插件。本文将重点突出基于 flutter-boost 的混合工程，单引擎模式下接入 Flutter 地图插件遇到的问题和解决方案。

二、如何源码集成

在混合项目中集成插件主要分 flutter 和原生两侧，集成 Flutter 插件时，官方 demo 中可以直接下载到插件的源码。本文以接入 flutter 地图插件 3.3.1 版本示例。

2.1 Flutter 端集成

获取到官方 demo 后在该目录下执行 flutter pub get，然后去 flutter SDK 下找到 pub-cache 依赖缓存文件目录，根据业务需要将每个插件 src 文件下的代码导入到 flutter 工程中。

2.2 IOS 端集成

执行完 flutter pub get 后，根据需要将每个插件 iOS/Classes/ 目录下的代码导入工程中。

2.3 Android 端集成

Android 的 Native 侧的集成和 IOS 端是类似的。在 Native 工程中新建一个地图 Module。把地图 Demo 中的地图插件源码 Android 部分放入工程即可。

三、地图插件实现原理：platformView

地图插件按功能分为 Map、Search、Util 等模块，其基本实现类似，使用 MethodChannel 与 native 通信，我们以 Map 为例分析其实现。插件使用了 PlatformView 将原生地图嵌入到 flutter 页面中，在 flutter 层为 UIKitView、AndroidView，native 在生成地图后根据 viewId 初始化 BMFMapViewController，包含对应的 MethodChannel。BMFMapViewController 聚合了对地图操作，派发到不同模块调用地图 native 方法。

3.1 什么是PlatformView

PlatformView 是允许原生组件嵌入到 Flutter 页面的一种技术，能够让我们将一些原生成熟组件、flutter UI 框架难以实现的地图、WebView 等组件展示在 flutter 页面中。

Flutter 提供了 Virtual Display、Hybrid Composition 两种方式实现 PlatformView。Virtual Display 模式将 native view 加载到内存当中，随着 flutter Widget 一起渲染出来。Hybrid Composition 模式是直接将 native view 添加到 flutter view 图层上。iOS采用了 Hybrid Composition 模式，Android 采用了 Virtual Display 和 Hybrid Composition 两种模式。

3.2 PlatformView 实现原理

1）flutter 渲染流程

在介绍 Hybrid Composition 实现之前，先通过下图大致了解下 flutter 的渲染流程。

在收到 VSync 信号之后，Dart 层在 UI Thread 完成 Widget Tree、Element Tree、RenderObject Tree 三棵树的更新与生成，然后生成包含绘制信息的 layer Tree 交给 Engine 去渲染，最后在 GPU Thread 经历 Compositor、Skia 将 flutter 视图渲染出来。

2）Hybrid Composition 模式分析

以 iOS 为例逐步分析 Hybird Composition 模式执行流程。首先 Dart 层提供了 UIKitView 组件来展示 native view，didChangeDependencies 方法中通过 channel 初始化一次 native view，生成唯一标识 native view 的 viewId，并将 native view 缓存在 root_views_ 中。在实际组装 layer 层时，dart 层会传输给 engine 展示 native view 的坐标和大小，并生成一个 PlatformViewLayer，也就是说 native view 的位置、大小信息是由 dart 层控制的。