Flutter实现原理及在马蜂窝的跨平台开发实践

官方默认的构建脚本在 Flutter 1.0.0 版本存在 Bug——最终的产物中会缺少 flutter_shared/icudtl.dat 文件，导致 App Crash。目前的解决方式是将这个文件复制到工程的 assets 下( 在 Flutter 最新 1.2.1 版本中这个 Bug 已被修复，但是 1.2.1 版本又出现了一个 UI 渲染的问题，所以只能继续使用 1.0.0 版本)。

d. Android Native 平台工程集成，增加下面依赖配置即可，不会影响 Native 平台开发的同学

implementation 'com.mfw.app:MerchantFlutter:0.0.5-beta' 

Flutter 和 iOS、Android 的交互

使用平台通道(Platform Channels)在 Flutter 工程和宿主(Native 工程)之间传递消息，主要是通过 MethodChannel 进行方法的调用，如下图所示：

图12 ：Flutter与iOS、Android交互

为了确保用户界面不会挂起，消息和响应是异步传递的，需要用 async 修饰方法，await 修饰调用语句。Flutter 工程和宿主工程通过在 Channel 构造函数中传递 Channel 名称进行关联。单个应用中使用的所有 Channel 名称必须是唯一的; 可以在 Channel 名称前加一个唯一的「域名前缀」。

Flutter 与 Native 性能对比

我们分别使用 Native 和 Flutter 开发了两个列表页，以下是页面效果和性能对比：

iOS 对比(机型 6P 系统 10.3.3)：

Flutter 页面：

iOS Native 页面：

可以看到，从使用和直观感受都没有太大的差别。于是我们采集了一些其他方面的数据。

Flutter 页面：

iOS Native 页面：

另外我们还对比了商家端接入 Flutter 前后包体积的大小：39Mb → 44MB

在 iOS 机型上，流畅度上没有什么差异。从数值上来看，Flutter 在 内存跟 GPU/CPU 使用率上比原生略高。 Demo 中并没有对 Flutter 做更多的优化，可以看出 Flutter 整体来说还是可以做出接近于原生的页面。

下面是 Flutter 与 Android 的性能对比。

Flutter 页面：

Android Native 页面：

从以上两张对比图可以看出，不考虑其他因素，单纯从性能角度来说， 原生要优于 Flutter，但是差距并不大，而且 Flutter 具有的跨平台开发和热重载等特点极大地节省了开发效率。并且，未来的热修复特性更是值得期待。

混合栈管理

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!