Flutter技术杂谈

网易技术热爱者

于 2020-10-22 17:25:58 发布

阅读量1.3k

点赞数 11

分类专栏：前端文章标签： flutter

本文链接：https://blog.csdn.net/m0_47390782/article/details/109165939

版权

本文深入探讨Flutter技术，从为何选择Flutter、性能对比、业务架构、适配策略、常见问题到项目优化等方面展开，揭示Flutter在跨端开发的优势与挑战。文章指出Flutter的高性能得益于接近原生的编译方式，但Web端仍存在性能问题。同时，作者分享了项目实践中遇到的坑和解决方案，如泛型问题、WebView在不同平台的适配等，并提出未来Flutter在多平台应用的潜力。

摘要由CSDN通过智能技术生成

在这里插入图片描述

张龑（网易有道技术团队）

Flutter的性能分析、工程架构、以及一些细节处理

1.为何Flutter

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

先看看具体的工程效果

web端的链接

flutter工程效果

Flutter VS 原生

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

在这里插入图片描述

Flutter VS Web

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

Flutter性能

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

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

在这里插入图片描述

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

与RN的性能对比：

在这里插入图片描述

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

跨端平台的多样性

![]](https://img-blog.csdnimg.cn/20201022165615498.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzkwNzgy,size_16,color_FFFFFF,t_70#pic_center)

引擎

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

语法糖

综合测评

互动应用

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

2.Flutter业务架构

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

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();
}