技术杂谈 | Flutter 的性能分析、工程架构与细节处理

出品/ 有道智云
编辑/ Ryan
来源：有道技术团队（ID：youdaotech）

一、为何 Flutter

跨端技术众多，为何选择 Flutter？它能带来哪些优势，有哪些缺点？

先看看具体的工程效果：

Flutter 工程效果​v.qq.com

web 端效果体验：

flutter_exercise

1.1 Flutter VS 原生

无论如何，原生的运行效率毋庸置疑是最高的，但是从工程工作量的角度来对比的话，特别是快速试错和业务扩展阶段，Flutter 是目前为止比较推荐的利器。

1.2 Flutter VS Web

任何跨端的技术都是基于一码多端的思维，解决工程效率的问题，之前很多的跨端技术，例如 React Native 等都是基于web的跨端性解决方案，但是大家都知道，web 在移动端上的运行效率和 PC 上有巨大差距的，这就导致 RN 不能很有效地在移动端完成各种复杂的交互式运算（例如复杂的动画运算，交互的执行性能等），即便是引入了 Airbnb 的 Lottie 引擎依然会在低端的手机上面显得很卡顿（当然也可以使用一些自研的引擎技术来针对各端来解决，不过这样就失去了跨端的意义）。

1.3 Flutter 性能

Flutter 的编译方式和产物是决定其高效运行效率的前提，不同于 web 的跨端编译一样（web 的跨端编译大多是选择了使用 “桥” 的概念来调用编译产物，通常是使用了原生端的入口 + web 端的桥来实现），Flutter 几乎是把 dart 的源码通过不同平台的编译原理生成各平台的产物，这种**“去桥"的产物正式我们所希望得到的、贴近原生运行性能的编译产物（当然，在 dart 最初设计的时候，是参考了很多前端的结构来完成的，特别从语法上面能够很明显地感受到前端的痕迹，而且最初的 dart2js 的原理也是同样"桥”**的概念）。

例如 9月23号 google 发布的新 Flutter 版本中，在支持的 Windows 编译产物上，就是通过类似 Visual Studio 的编译工具（如果要将你的 Flutter 工程编译成 Windows 产物，需要提前安装一些 VS 相关的编译插件），**生成了 Windows 下的工程解决方案 .sln，最终生成 dll 的调用方式，运行起来很流畅，**可以下载附件中的 Release.zip 来尝试运行。（Release.zip 下载）

（PS：这里所有编译工程都是通过同一套代码完成，包括上文中的 web 地址、移动端案例还有这里的 Windows 案例）

1.4 与 RN 的性能对比

以上是同样功能模块下，Flutter 和 RN 的一些数据上的对比，是从众多的数据中抽取出来比较有代表性的一组。

1.5 跨端平台的多样性

1.6 引擎

Flare-Flutter 是一款十分优秀的 Flutter 动画引擎，编译出的动画已经在 Windows、移动端、web 上亲测验证过。

1.7 语法糖

A?.B
如果 A 等于 null，那么 A?.B 为 null
如果 A 不等于 null，那么 A?.B 等价于 A.B
Animal animal = new Animal(‘cat’);
Animal empty = null;
//animal 非空，返回 animal.name 的值 cat
print(animal?.name);
//empty 为空，返回 null
print(empty?.name);
A??B
如果 A 等于 null，那么 A??B 为 B
如果 A 不等于 null，那么 A??B 为 A

1.8 综合测评

1.9 互动应用

Flutter 生成的互动可以嵌入到任何端中使用精简的指令集进行互动，为互动场景（教学场景等带来巨大的希望），以下是直播同步互动的 demo 场景。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cx342P7E-1616556166807)(/img/bVcNliS)]

二、Flutter 业务架构

Flutter 中目前是没有现成的 mvvm 框架的，但是我们可以利用 Element 树特性来实现 mvvm。

2.1 ViewModel

abstract class BaseViewModel {
  bool _isFirst = true;
  BuildContext context;

  bool get isFirst => _isFirst;

  @mustCallSuper
  void init(BuildContext context) {
    this.context = context;
    if (_isFirst) {
      _isFirst = false;
      doInit(context);
    }
  }

  // the default load data method
  @protected
  Future refreshData(BuildContext context);

  @protected
  void doInit(BuildContext context);

  void dispose();
  
class ViewModelProvider