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

在页面更新重新生成控件树时，RenderObjectElement 树会尽量保持重用。由于 RenderObjectElement 持有对应的 RenderObject，所有 RenderObject 树也会尽可能的被重用。如图所示就是三棵树之间的关系。在这张图里我们把形状当做渲染节点的类型，颜色是它的属性，即形状不同就是不同的渲染节点，而颜色不同只是同一对象的属性的不同。

图7: Widget、Element 和 Render 之间的关系

如果想把方形的颜色换成黄色，将圆形的颜色变成红色，由于控件是不能被修改的，需要重新生成两个新的控件 Rectangle yellow 和 Circle red。由于只是修改了颜色属性，所以 Element 和 RenderObject 都被重用，而之前的控件树会被释放回收。

图8: 示例

那么如果把红色圆形变成三角形又会怎样呢?由于这里发生变化的是类型，，所以对应的 Element 节点和 RenderObject 节点都需要重新创建。但是由于黄色方形没有发生改变，所以其对应的 Element 节点和 RenderObject 节点没有发生变化。

图9: 示例

7. 最后是【Material】 & 【Cupertino】，这是在 Widget 层之上框架为开发者提供的基于两套设计语言实现的 UI 控件，可以帮助我们的 App 在不同平台上提供接近原生的用户体验。

Flutter 在马蜂窝商家端

App 中的应用实践

图10: 马蜂窝商家端使用 Flutter 开发的页面

开发方式：Flutter + Native

由于商家端已经是一款成熟的 App，不可能创建一个新的 Flutter 工程全部重新开发，因此我们选择 Native 与 Flutter 混编的方案来实现。

在了解 Native 与 Flutter 混编方案前，首先我们需要了解在 Flutter 工程中，通常有以下 4 种工程类型：

1. Flutter Application

标准的 Flutter App 工程，包含标准的 Dart 层与 Native 平台层。

2. Flutter Module

Flutter 组件工程，仅包含 Dart 层实现，Native 平台层子工程为通过 Flutter 自动生成的隐藏工程(.ios / .android)。

3. Flutter Plugin

Flutter 平台插件工程，包含 Dart 层与 Native 平台层的实现。

4. Flutter Package

Flutter 纯 Dart 插件工程，仅包含 Dart 层的实现，往往定义一些公共 Widget。

（编辑：西安站长网）

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