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

参考了业界内的解决方法，以及项目自身的实际场景，我们选择类似于 H5 在 Navite 中嵌入的方式，统一通过 openURL 跳转到一个 Native 页面(FlutterContainerVC)，Native 页面通过 addChildViewController 方式添加 FlutterViewController(负责 Flutter 页面渲染)，同时通过 channel 同步 Native 页面与 Flutter 页面。

• 每一次的 push/pop 由 Native 发起，同时通过 channel 保持 Native 与 Flutter 页面同步——在 Native 中跳转 Flutter 页面与跳转原生无差异
• 一个 Flutter 页面对应一个 Native 页面(FlutterContainerVC) ——解决页面资源化
• FlutterContainerVC 通过 addChildViewController 对单例 FlutterViewController 进行复用——保证生命周期完整性，处理相关打点事件上报
• 由于每一个 FlutterViewController(提供 Flutter 视图的实现)会启动三个线程，分别是 UI 线程、GPU 线程和 IO 线程，使用单例 FlutterViewController 可以减少对资源的占用——解决资源性能问题

Flutter 应用总结

Flutter 一经发布就很受关注，除了 iOS 和 Android 的开发者，很多前端工程师也都非常看好 Flutter 未来的发展前景。相信也有很多公司的团队已经投入到研究和实践中了。不过 Flutter 也有很多不足的地方，值得我们注意：

1. 虽然 1.2 版本已经发布，但是目前没有达到完全稳定状态，1.2 发布完了就出现了控件渲染的问题。加上 Dart 语言生态小，学习资料可能不够丰富。
2. 关于动态化的支持，目前 Flutter 还不支持线上动态性。如果要在 Android 上实现动态性相对容易些，iOS 由于审核原因要实现动态性可能成本很高。
3. Flutter 中目前拿来就用的能力只有 UI 控件和 Dart 本身提供能力，对于平台级别的能力还需要通过 channel 的方式来扩展。
4. 已有工程迁移比较复杂，以前沉淀的 UI 控件，需要重新再实现一套。
5. 最后一点比较有争议，Flutter 不会从程序中拆分出额外的模板或布局语言，如 JSX 或 XM L，也不需要单独的可视布局工具。有的人认为配合 HotReload 功能使用非常方便，但我们发现这样代码会有非常多的嵌套，阅读起来有些吃力。

目前阿里的闲鱼开发团队已经将 Flutter 用于大型实践，并应用在了比较重要的场景(如产品详情页)，为后来者提供了良好的借鉴。马蜂窝的移动客户端团队关于 Flutter 的探索才刚刚起步，前面还有很多的问题需要我们一点一点去解决。不过无论从 Google 对其的重视程度，还是我们从实践中看到的这些优点，都让我们对 Flutter 充满信心，也希望在未来我们可以利用它创造更多的价值和奇迹。

路途虽远，犹可期许。

参考文献：

Flutter's Layered Design

https://www.youtube.com/watch?v=dkyY9WCGMi0

Flutter's Rendering Pipeline

https://www.youtube.com/watch?v=UUfXWzp0-DU&t=1955s

Flutter原理与美团的实践https://juejin.im/post/5b6d59476fb9a04fe91aa778#comment

(题图来源：网络)

【本文是51CTO专栏作者马蜂窝技术的原创文章，作者微信公众号马蜂窝技术(ID：mfwtech)】

戳这里，看该作者更多好文

【编辑推荐】

1. 马蜂窝消息总线——面向业务的消息服务设计
2. 马蜂窝定制游抢单系统设计与功能核心
3. 刚刚，阿里开源 iOS 协程开发框架 coobjc！
4. 面向接口/协议？看DuerOS的技能开发
5. 开发人员不得不知的MySQL索引和查询优化

（编辑：晋中站长网）

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