了解有关 Flutter 的全部信息：它有何过人之处？坑在哪里？我应该如何学习？

terry 2年前 (2023-09-22) 阅读数 77 #移动小程序

Flutter 的由来

Flutter 的诞生其实还是蛮有趣的。 Flutter 诞生于 Chrome 团队的内部实验。在谷歌的前端团队从前端删除了一些“混乱”的规范后，他们发现。在基准测试中，性能实际上提升了20倍。一次偶然的机会，Flutter 被批准为项目。

所以Flutter是基于封面而诞生的，而基于其诞生的原因可以看出，Flutter本身并没有太多语法糖。作为一个框架，它是比较“保守”的，选择的Dart语言也是一种保守的语言。 其编程模型和语法具有浓厚的前端味道，但最早是用在移动客户端的开发中。

所以当Flutter出来的时候，肯定是处于一个非常尴尬的境地：

对于客户端原生开发来说，声明式的开发方式一旦上手就不习惯了，你习惯了代码和布局分离（java\kotlin + xml）和命令式对象编程，声明式开发需要额外的学习成本； 我也觉得Flutter的小窝“恶心”。
对于前端开发来说，Flutter的环境配置很烦人。除了 VSCode 和 Flutter SDK 之外，还需要 Java、Gradle、Android SDK 和 XCode 等原生“开箱即用”环境。变量（时不时会遇到网络问题）以及Flutter 所需的原生平台知识点对前端非常不友好； 也觉得Flutter的小窝“恶心”。

你找到了吗？我并没有说 Dart 语言是学习成本，因为无论怎么看，无论是精通 JS 的前端还是精通 Java 的客户端\Kotlin\Swift，Dart 都是“小弟” 。

另外，前端和客户端都会批评Flutter的嵌套“恶心”，但是嵌套问题严重吗？我们稍后会讨论这个。

总结一下，Flutter对于前端坑或者客户端坑的新人来说都会有一定的门槛和心理抵触。那么对于前端或者客户端来说，有必要学习Flutter吗？

学习 Flutter 的理由

在我遇到的大部分 Flutter 新人中， 有很大一部分其实是“被迫”使用 Flutter的 因为需要使用 Flutter 经理或老板，所以他们不得不以“拒绝但欢迎”的态度开始学习Flutter。这就是最“有力”的理由之一：“老板（领导）想要”，除非你选择“跳”，飞出三个世界。

1。个人竞争力水平

其实开拓这个圈子是很有趣的。当我们使用一项技术很长一段时间后，很容易认为这项技术很受欢迎，因为我们周围的每个人都在使用它，其他人也在使用它。框架应该很酷，因为没有人使用幻觉，尤其是在“媒体”的授意下，“孕妇效应”很容易导致认知误解。

去年年中我对《国内大厂在移动端跨平台的框架接入分析》中的53个样本做了简单的数据分析。可以看到flutter（19）、weex（17）、react-native（22），同时下图展示了在一台机器上使用libChe 使用Flutter的生产应用的统计数据个人手机。

我只想介绍一下：Flutter 不再是以前的小众框架了。近两年逐渐成为主流的跨平台开发框架之一。

所以Flutter确实可以对你找工作有帮助。当然，我不建议你从头开始学习Flutter，因为Flutter本身只是一个跨平台的接口。

理解上面这句话很重要，因为它可以让你不被“流量焦虑”，虽然Flutter支持移动端、Web端和PC端，但作为一个UI框架，它主要是帮助我们解决UI——问题。是“跨平台”的，有一些业务逻辑，平台相关的东西比如蓝牙、平台交互、数据存储、打包构建等都离不开原生支持。

目前的跨平台框架，无论是Flutter、react-native还是weex，都定位为UI框架。他们解决了跨平台UI业务的成本并且他们的开发距离不启用原生平台开发支持。

如果原来的平台挂了，那还有什么意义呢？比如，现在谁会谈论跨WinPhone？所以Flutter和原生平台应该是一种相互成长的局面，而不是《xxx制霸，###要凉的》“节奏党”都是寄生共生的关系。没有相应平台的开发经验，很难将 Flutter 使用得“得心应手”。

但是现在Flutter确实可以帮助你的职业发展，因为Flutter强化了你的业务开发技能，让你参与更多的平台开发，无论是大前端还是KPI。当然，这些react-native和uni-app也可以给你带来，甚至更低的前端开发费用，那么为什么选择Flutter呢？

其实还有一点很有趣。对于原生Android开发来说，学习Flutter相当于学习了70%以上的Jetpack Compose。

`2。 Flutter的一致性`

其实我个人一直建议在客户端学习Flutter，因为对于前端来说react-native和uni-app其实更划算，当然看起来你们的经理和老板们认为不行。

那么使用 Flutter 还有哪些额外好处呢？ Flutter 性能和一致性。

因为Flutter是一个UI框架，所以它是真正的跨平台！为什么要强行淘汰“真正的跨平台”，因为与react-native和weex不同，Flutter的控件不是通过原生控件渲染的，而是由Flutter引擎的能力提供的即， Flutter 的控件与平台无关。

简单来说，原生平台提供了一个Surface作为画板，然后Flutter只需要渲染相应的控件即可，这个过程最终被包装成AOT二进制文件。

所以Flutter的UI控件可以做到所见即所得。这对我个人来说是向前迈出的非常重要的一步。为什么这么说？此时对比一下react-native。

因为react-native将JS中的控件转换为原生控件进行渲染，所以rn中的控件必须依赖原生平台的控件，所以不同系统之间原生控件的差异，同一系统不同版本具有不同的属性和对控制的影响，共同导致后期开发过程中维护成本较大。

在我的react-native开发生涯中，经常会出现这样的情况：

在iOS上调试的样式在Android上不正常；
Android 上有效的样式在 iOS 上不支持；
iOS平台上的控制效果在Android上有不同的视图，比如下拉刷新、Appbar等；

当然，这些问题最终可以通过ifelse以及我项目的自定义控件来解决，但由于我开发的结果是违背原生平台的。通过使用跨平台。

Flutter的控件属性决定了它不存在这些问题，我什至经常只在iOS模拟器上开发和测试所有界面逻辑，而不用担心Android上的兼容性当然还有屏幕尺寸适配这是不可避免的。

从这个角度宽松地讲，Flutter 更像是一个类似于 Unity 的轻量级游戏引擎，但它提供了 2D 控件。

当然，Flutter 的这种实现方式也有缺点。这就是当你需要使用平台管理进行混合开发时，使用Flutter的价格和体验无疑会被放大。在这方面，react-native有着先天的优势。优势。？ 1。 Flutter 在调试和发布期间的性能差异巨大，因为 JIT 和 AOT 之间存在差异。

2。不要在模拟器上测试性能。这完全没有意义，因为手机上的 Flutter 会更多地依赖 GPU 的算力。

3。混合 Flutter 开发会影响性能。例如，在原来的Android项目中，如果将某个模块的业务逻辑改为Flutter，这将对性能和内存带来很大的考验。至于为什么？这就是前面提到的Flutter独立控制渲染和堆栈管理带来的负面影响。

4。同样的框架，在不同的人手里，会产生不同的结果。一般来说对于普通开发者来说，流行的框架一般不会造成很大的性能瓶颈，反而是能力多了导致项目出现瓶颈。

`如何学习Flutter？`

快速搭建环境并简单了解Flutter的API后，我认为学习Flutter有两个核心点：响应式开发和Widget背后是什么？？，这是现在前端开发的主流，当然也是客户端开发的趋势，比如Jetpack Compose、SwiftUI。

您会惊讶地发现 Jetpack Compose 和 Flutter 是如此相似。

什么是响应式开发？简单来说，你不需要手动更新接口，只需要通过代码“声明”接口，然后连接数据和接口之间的关系。数据更新了，界面当然也会更新。

从代码层面，到原生开发，响应式开发中没有xml布局。布局完全用代码完成。你所看到的就是你得到的。同时，您不需要操作“对象”界面来继续。分配和更新时，只需配置数据与接口的关系即可。

例如：

以前在Android上，你必须写一个xml，然后布局一个TextView，通过yyyyyyy获取这个对象，并且然后调用y 来setTextView.赋值;
现在在 Flutter 中你只需要声明 Widget 的 Text 并放入 data。此类数据配置为文本，当数据发生变化时，文本的显示内容也会发生变化；

对于 Android 开发，您可能会认为这不是 MVVM Next DataBinding？事实上，并不完全相同。举一个更生动的例子，以下是 Throwing Line 人员在 Google 会议上分享的关于 Jetpack Compose 的内容。为什么数据绑定模型不是响应式开发：

因为数据绑定无法实现“声明式”或UI模型，原生UI是比数据绑定更强的数据绑定。例如，在Compose中，您可以简单地绑定字符串的值，也可以使用布尔数据类型来检查界面元素是否存在。创建例如另一个布尔类型变量，并用它来控制特定文本的显示：

e

 先变成  然后变成沙子。 false ,而不是这样设置一个❙❙❙❙❙❙❙，上面的Text()在界面代码中消失了。每次数据变化引起的界面更新看起来就像是界面关闭并重新启动，并用新数据重新初始化它。这就是所谓的声明式UI，这是数据绑定做不到的
 当然，Compose 并没有真正重启界面，只是更新了需要更新的部分。 ，这样我们就可以保证它的自动更新接口和我们手动更新一样高效。 
在Flutter中也类似。当您通过 ture 和 false 进行布局时，它会直接影响树形结构结构逻辑，所以作为一个Android开发者，当你学习Flutter时，你需要习惯转向这种开发模式并“放弃”在获取数据后保存或保持界面控件可操作的想法。另外在Flutter中，按住Widget控件来改变它大多数时候是没有意义的，这就是我们下次要讲的。 
2。在 widget 
的背后，Flutter 中的一切都是 Widget，Widget每个单独的 widget 的状态代表一帧。 
理解这句话非常重要。这句话也是让很多刚刚接触 Flutter 的开发者感到困惑的，因为 Flutter 中所有界面的显示效果都是在代码层面通过 Widget 作为输入来实现的。 
Widget是不可变的，也就是说当页面发生变化时，Widget必须重新构建，而id的固定状态代表一个静止图像，当图像发生变化时，将相应的小部件肯定会改变。 
举个例子，正如我经常说的，下面的代码定义了一个 TestWidget，TestWidgettoincoming title 和计数 上显示的参数文本

。同时，如果count大于99，则仅显示99。


/// Warnning
/// This class is marked as '@immutable'
/// but one or more of its instance fields are not final
class TestWidget extends StatelessWidget {

  final String title;

  int count;

  TestWidget({this.title, this.count});

  @override
  Widget build(BuildContext context) {
    this.count = (count > 99) ? 99 : count;
    return Container(
      child: new Text("$title $count"),
    );
  }
}
复制代码

这段代码看上去没有问题，可以正常运行，但是在编译器上就会出现“这个类被标记为‘@immutable’，但是它的一个或多个实例字段不是final的”提示警告，这是因为TestWidget中的count成员变量没有添加final声明，容易造成代码级混淆。 ️保存并使用了两次。

如上面代码所示，count成员没有final语句，因此它计数执行第二次更改和赋值，导致 count 成员似乎存储在 TestWidget 中并使用了两次。某些情况下很容易造成widget.count这样的歧义，所以需要为添加这个 final 逻辑。

如果将StatelessWidget替换为StatefulWidget，则replace方法位于Stat、Stat 可以用于跨帧保存。

class TestWidgetWithState extends StatefulWidget {
  final String title;

  TestWidgetWithState({this.title});

  @override
  _TestWidgetState createState() => _TestWidgetState();
}

class _TestWidgetState extends State<TestWidgetWithState> {
  int count;

  @override
  Widget build(BuildContext context) {
    this.count = (count > 99) ? 99 : count;
    return InkWell(
      onTap: () {
        setState(() {
          count++;
        });
      },
      child: Container(
        child: new Text("${widget.title} $count"),
      ),
    );
  }
}
复制代码

因此，这里最重要的是首先了解Widget不变的性质，然后通过State❀您可以通过widtate获得数据来获取数据。恢复，那么为什么State OK？

这涉及到Flutter中另一个非常重要的知识点，Widget背后是什么？事实上，Flutter 中的 widget 并不是真正的控件。 在Flutter世界中，我们最常使用的Widget其实更像是一个配置文件，而其背后的元素RenderObject，层等是实际“工作”的对象。

元素、渲染对象、图层

》。

举个简单的例子，如下代码所示，testUseAll这个Text如果代码用在同一个、三个和三个地方，就可以在同一个页面使用。真实的 View 无法在一页上的多个位置加载和使用。 Element

、 RenderObject甚至Layer最终都渲染出来了，所以配置文件 @immutable 每次状态都可以重建更新。

那么回到最初的问题：扑窝恶心吗？是的，Flutter 的设置使其具有嵌套的客观事实，但是当你将Widget理解为配置文件时，你可以更好地组织代码，例如 Flutter 配置模板中的Container。

参考Container 您将学会在 Flutter 中组织代码逻辑的第一步。

同时，因为 Widget 并没有真正起作用，所以嵌套实际上并不是嵌套 View❙。一般情况下 Widget 嵌入是不会造成任何性能问题的，因为它不是官方使用的，嵌入不会造成严重的性能损失。例如，当您写了很多 ORS 的方舟时。

简单来说，正常情况下，屏幕的变化就是Widget的变化更新为RenderObject，可以在Flutter中跨帧保存。状态实际上包含在Element中，因此它可以用于跨Widget存储数据。

因此嵌入Widget通常不会导致性能问题。每个 Widget 状态代表一个帧。可以理解为，这个“配置信息”代表的是当前A屏，后面Widget，嵌套Paddingnnn这些控件，最后只是一个“关”仅当时设置” 画布计算”。

所以重要的是要了解Widget控件，Widget并不是真正的，它只是配置信息。了解了这一点，你才能发现 Flutter 更广阔的大陆，例如：

Flutter 的控件是从 Elemnt 开始，成为真正的工作对象；
取决于Widget界面效果。如何实现？您应该看看它的等效 RenderObejcet 是如何绘制的；
如果想知道为什么不同栈或模块中的页面不会互相干扰，只要看它的Layer的逻辑；❀让所有的id都有渲染对象？ Widget、Element、RenderObject、Layer是什么等价关系？

这些是学习 Flutter 需要理解和整合的内容。一旦理解了Widget背后的复杂逻辑，你就会发现Flutter是如此简单。，实现复杂的控制是如此简单，并且结合Canvas的能力真是令人惊叹。

这部分的具体内容当然不是三言两语能够说清楚的。我出版的《Flutter开发实战详解》的第三章和第四章注重内容，这也是这本书的主要灵魂。这部分内容不会因为Flutter版本的迭代而过时的内容。

这是小广告吗？？

`Flutter是一个有陷阱的框架`

最后说一下Flutter的陷阱。事实上，没有一个框架是没有陷阱的。如果框架很完善，没有问题，那么我们的竞争力就会越来越弱，互换性就会越来越高。

这也是为什么当初Andorid、iOS开发很火爆，现在招客户端开发又回归理性了，因为这个领域已经越来越成熟，当然也变得“量”起来了。

其实我一直觉得我们使用框架并没有什么特别的价值，但是解决使用框架带来的问题才是我们独特的价值。

而 Flutter 有很多问题，例如：

WebView 问题：Flutter 独特的 UI 机制意味着 Flutter 必须以特殊的方式连接，例如❙Control、❝ da 地图视图

还导致接入后的性能、键盘、输入框等技术问题。详情请参阅：《Hybrid Composition 深度解析》和《 Android PlatformView 和键盘问题》。 
图像处理和加载：Flutter 在图像处理和加载方面的能力无疑是比较弱的。同时，对于加载单张大图以及大量图片列表的显示处理，Flutter 很容易出现内存和部分 GPU 溢出问题。这部分问题特别难处理。如果需要使用原生平台来解决，就需要使用外部纹理来完成，而且这种实现的维护成本并不低。 
混合开发是不可避免的问题：由于Flutter的控件和侧栈与原有平台分离，混合开发的结果会导致维护成本的增加。今天比较常用的是flutter_boost和flutter_thrio它们都不能真正测试开发痛点，所以这也是一个大杂烩。 
不过，我收到的关于Flutter的问题中，大部分都与Flutter无关，比如“运行后显示Gradle错误，显示超时“这样的问题”
“iOS无法在真实设备上运行”
“有没有完成类似xxx的检查”
····说实话，如果是这些问题的话，我觉得是这个。不是Flutter的问题，大多数时候是日志、文档、互联网的问题，甚至只是搜索引擎检索技术的问题......
 虽然 Flutter 存在这样或那样的问题，但经过深思熟虑，它其实是现阶段最适合我的 UI 框架。
终于
好久没有写这么长的内容了。一般来说，能读懂这么长的内容的人并不多。只是希望这篇文章能让你对Flutter有一个更全面的了解，或者能够对你有所帮助。找到了学习Flutter的方向，最后借用某位大佬说过的一句话：
“能够大规模商业化的技术并不需要高智商，否则这个技术就无法规模化。某某的成员节目，请停止你亲爱的自信。” 
作者：连毛德小果
链接：https://juejin.cn/post/6932033252320346126
版权归作者所有。商业转载请联系作者获取授权。非商业转载请注明出处。