Flutter 实现道理及在马蜂窝的跨平台开拓实践

一向以来，跨平台开拓都是困扰移动客户端开拓的困难。

在马蜂窝旅游 App 许多营业场景里，我们实行过一些主流的跨平台开拓办理方案， 好比WebView 和 React Native，来晋升开拓服从和用户体验。但这两种方法也带来了新的题目。

好比行使 WebView 跨平台方法，利益确实很是明明。基于 WebView 的框架集成了当下 Web 开拓的诸多上风：富厚的控件库、动态化、精采的技能社区、测试自动化等等。可是弱点也同样明明：渲染服从和 JavaScript 的执行手段都较量差，使页面的加载速率和用户体验都不尽如人意。

而行使以 React Native(简称 RN)为代表的框架时，维护又成了浩劫题。RN 行使类 HTML+JS 的 UI 建设逻辑，天生对应的原生页面，将页面的渲染事变交给了体系，以是渲染服从有很大的上风。但因为 RN 代码是通过 JS 桥接的方法转换为原生的控件，以是受各个体系间的差别影响很是大，固然可以开拓一套代码，但对各个平台的适配却很是的繁琐和贫困。

为什么是 Flutter

2018 年 12 月初，Google 正式宣布了开源跨平台 UI 框架 Flutter 1.0 Release 版本，马蜂窝电商客户端团队举办了调研与实践，发明Flutter能很好的辅佐我们办理开拓中碰着的题目。

1. 跨平台开拓，针对 Android 与 iOS 的气魄威风凛凛计划了两套计划说话的控件实现(Material & Cupertino)。这样不单可以或许节省人力本钱，并且在用户体验上更好的适配 App 运行的平台。
2. 重写了一套跨平台的 UI 框架，渲染引擎是依赖 Skia 图形库实现。Flutter 中的控件树直接由渲染引擎和高机能当地 ARM 代码直接绘制，不必要通过中间工具(Web 应用中的假造 DOM 和真实 DOM，原生 App 中的假造控件僻静台控件)来绘制，使它有靠近原生页面的机能，辅佐我们提供更好的用户体验。
3. 同时支持 JIT 和 AOT 编译。JIT编译方法使其在开拓阶段有个备受接待的成果——热重载(HotReload)，这样在开拓时可以省去构建的进程，进步开拓服从。而在 Release 运行阶段回收 AOT 的编译方法，使执行服从很是高，让 Release 版本施展更好的机能。

于是，电商客户端团队抉择试探 Flutter 在跨平台开拓中的新也许，并率先应用于商家端 App 中。在本文中，我们将团结 Flutter 在马蜂窝商家端 App 中的应用实践，切磋 Flutter 架构的实现道理，有何上风，以及怎样辅佐我们办理题目。

Flutter 架构和实现道理

Flutter 行使 Dart 说话开拓，首要有以下几点缘故起因：

• Dart 一样平常环境下是运行 DartVM 上，可是也可以编译为 ARM 代码直接运行在硬件上。
• Dart 同时支持 AOT 和 JIT 两种编译方法，可以更好的进步开拓以及 App 的执行服从。
• Dart 可以操作奇异的断绝区(Isolate)实现多线程。并且不共享内存，可以实现无锁快速分派。
• 分代垃圾接纳，很是得当 UI 框架中常见的大量 Widgets 工具建设和烧毁的优化。
• 在为建设的工具分派内存时，Dart 是在现有的堆上移动指针，担保内存的增添是程线性的，于是就省了查找可用内存的进程。

Dart 首要由 Google 认真开拓和维护。今朝 Dart 最新版本已经是 2.2，针对 App 和 Web 开拓做了许多优化。而且对付大大都的开拓者而言，Dart 的进修本钱很是低。

Flutter 架构一ㄇ回收的分层计划。从下到上依次为：Embedder(嵌入器)、Engine、Framework。

图1: Flutter 分层架构图

Embedder 是嵌入层，做好这一层的适配 Flutter 根基可以嵌入到任何平台上去;

Engine 层首要包括 Skia、Dart 和 Text。Skia 是开源的二位图形库;Dart 部门首要包罗 runtime、Garbage Collection、编译模式支持等;Text 是文本渲染。

Framework 在最上层。我们的应用环绕 Framework 层来构建，因此也是本文要先容的重点。

Framework

1.【Foundation】在最底层，首要界说底层器材类和要领，以提供应其他层行使。

2.【Animation】是动画相干的类，可以基于此建设补间动画(Tween Animation)和物理道理动画(Physics-based Animation)，相同 Android 的 ValueAnimator 和 iOS 的 Core Animation。

3.【Painting】封装了 Flutter Engine 提供的绘制接口，譬喻绘制缩放图像、插值天生阴影、绘制盒模子边框等。

4.【Gesture】提供处理赏罚手势辨认和交互的成果。

5.【Rendering】是框架中的渲染库。控件的渲染首要包罗三个阶段：机关(Layout)、绘制(Paint)、合成(Composite)。

从下图可以看到，Flutter 流水线包罗 7 个步调。

图2: Flutter 流水线

起首是获取到用户的操纵，然后你的应用会因此表现一些动画，接着 Flutter 开始构建 Widget 工具。

Widget 工具构建完成后进入渲染阶段，这个阶段首要包罗三步：

• 机关元素：抉择页面元素在屏幕上的位置和巨细;
• 绘制阶段：将页面元素绘制成它们应有的样式;
• 合成阶段：凭证绘制法则将之前两个步调的产品组合在一路。

最后的光栅化由 Engine 层来完成。

在渲染阶段，控件树(widget)会转换成对应的渲染工具(RenderObject)树，在 Rendering 层举办机关和绘制。

在机关时 Flutter 深度优先遍历渲染工具树。数据流的转达方法是从上到下转达束缚，从下到上转达巨细。也就是说，父节点会将本身的束缚转达给子节点，子节点按照吸取到的束缚来计较本身的巨细，然后将本身的尺寸返回给父节点。整个进程中，位置信息由父节点来节制，子节点并不体谅本身地址的位置，而父节点也不体谅子节点详细长什么样子。

图3: 数据传播递方法

（编辑：湖南网）

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