我家小花儿

这个屌丝很懒，什么也没留下！

热门标签

全面理解-Flutter（万字长文，深度解析，android插件化框架_flutter框架

作者：我家小花儿 | 2024-04-25 19:58:16

踩

flutter框架

1）介绍一下 Skia

Skia 是一个 2D 的绘图引擎库，其前身是一个向量绘图软件，Chrome 和 Android 均采用 Skia 作为绘图引擎。Skia 提供了非常友好的 API，并且在图形转换、文字渲染、位图渲染方面都提供了友好、高效的表现。Skia 是跨平台的，所以可以被嵌入到 Flutter 的 iOS SDK 中，而不用去研究 iOS 闭源的 CoreGraphics / Core Animation。

Skia 是用 C++ 开发的、性能彪悍的 2D 图像绘制引擎，其前身是一个向量绘图软件。Skia 在图形转换、文字渲染、位图渲染方面都表现卓越，并提供了开发者友好的 API。Android 自带了 Skia，所以 Flutter Android SDK 要比 iOS SDK 小很多。正是得益于 Skia 的存在：

Flutter 底层的渲染能力得到了统一，不在需要使用做双端适配；
通过 OpenGL、GPU，不需要依赖原生的组件渲染框架。
Flutter 可以最大限度的抹平平台差异，提升渲染效率和性能。

2）Flutter 的渲染流程

用户可以看到一张图像展示，至少需要三类介质：CPU、GPU 和显示器。CPU 负责图像的数据计算，GPU 负责图像数据的渲染，而显示器是最终图片展示的载体。CPU 拿到需要上屏的数据做处理和加工，处理完成之后交给 GPU，GPU 在渲染之后将数据放入帧缓冲区，随后随着控制同步信号 (VSync)以周期性的频率，从缓冲区内读出数据，在显示器上进行图像呈现。而且操作系统就是一个无限循环的机制，不停的重复上面的操作，进行显示器的更新.

Flutter 的渲染整体流程也是这样的， Dart 进行视图数据的合成，然后交给 Skia 引擎进行处理，处理之后再交给 GPU 进行数据合成，然后准备上屏。当一帧图像绘制完毕后准备绘制下一帧时，显示器会发出一个垂直同步信号（VSync），所以 60Hz 的屏幕就会一秒内发出 60 次这样的信号。

3）Flutter 绘制流程

如上图所示，Flutter 渲染流程分为 7 个步骤：

首先是获取到用户的操作，然后你的应用会因此显示一些动画；

接着 Flutter 开始构建 Widget 对象。Widget 对象构建完成后进入渲染阶段，这个阶段主要包括三步：

布局元素：决定页面元素在屏幕上的位置和大小；
绘制阶段：将页面元素绘制成它们应有的样式；
合成阶段：按照绘制规则将之前两个步骤的产物组合在一起

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

4）布局

布局时 Flutter 深度优先遍历渲染对象树。数据流的传递方式是从上到下传递约束，从下到上传递大小。也就是说，父节点会将自己的约束传递给子节点，子节点根据接收到的约束来计算自己的大小，然后将自己的尺寸返回给父节点。整个过程中，位置信息由父节点来控制，子节点并不关心自己所在的位置，而父节点也不关心子节点具体长什么样子。

为了防止因子节点发生变化而导致的整个控件树重绘，Flutter 加入了一个机制——RelayoutBoundary，在一些特定的情形下 Relayout Boundary 会被自动创建，不需要开发者手动添加。

边界：Flutter 使用边界标记需要重新布局和重新绘制的节点部分，这样就可以避免其他节点被污染或者触发重建。就是控件大小不会影响其他控件时，就没必要重新布局整个控件树。有了这个机制后，无论子树发生什么样的变化，处理范围都只在子树上。

缓存：要提升性能表现，缓存也是少不了的。在 Flutter 中，几乎所有的 Element 都会具有一个 key，这个 key 是唯一的。当子树重建后，只会刷新 key 不同的部分，而节点数据的复用就是依靠 key 来从缓存中取得。

在确定每个空间的位置和大小之后，就进入绘制阶段。绘制节点的时候也是深度遍历绘制节点树，然后把不同的 RenderObject 绘制到不同的图层上。

5）绘制

在布局完成之后，渲染对象树中的每个节点都有了明确的尺寸和位置。Flutter 会把所有的 Element 绘制到不同的图层上。与布局过程类似，绘制的过程也是深度优先遍历，先绘制父节点，然后绘制子节点。以下图为例：节点 1、节点 2、节点 3、4、5，最好绘制节点 6。

如上图可以看到一种场景，就是比如视图可能会合并，导致节点 2 的子节点 5 与它的兄弟节点 6 处于同一个图层，这样会导致当节点 2 需要重绘的时候，与其无关的节点 6 也会被重绘，带来性能问题。

为了解决上面的问题，Flutter 提出了布局边界的机制 ——重绘边界(Repaint-Boundary)。在重绘边界内，Flutter 会强制切换新的图层，这样可以避免边界内外的互相影响，避免无关内容虽然处于同一个层级导致的不必要的重绘。

重绘边界的一个典型场景就是 ScrollView。ScorllView 滚动的时候会刷新视图，从而触发内容重绘，而当滚动内容重绘时，一般情况下其它内容是不需要被重绘的。这个时候重绘边界就非常有价值了。

**这里简单理解，就是更精细化的对控件的更新，进行了小范围的控制。在时间复杂度和空间复杂度中进行权衡。**未来我们优化业务，大概率也会优化这里，找到自身业务的平衡点。

6）合成和渲染

最上面已经展示了 Flutter 的 7 层渲染流水线（Renderingpipline）的图里。这里主要描述一下对合成和渲染的理解。渲染流水线是由垂直同步信号（Vsync）驱动的。这个概念很类似我们平时说的 FPS 的概念，每秒 60 帧，过低的频率会显得页面很卡。当每一次 Vsync 信号到来以后，Flutter 框架会按照图里的顺序执行一系列动作:动画（Animate）、构建（Build）、布局（Layout）和绘制（Paint）

最终生成一个场景（Scene）之后送往底层，由 GPU 绘制到屏幕上。

Flutter App 只有在状态发生变化的时候需要触发渲染流水线。当你的 App 无任何状态改变的时候，Flutter 是不需要重新渲染页面的。所以，Vsync 信号需要 Flutter App 去调度。比如，我们在 Widget 内使用了 setState 方法改变了控件的状态。

整个渲染流水线是运行在 UI 线程里的，以 Vsync 信号为驱动，在框架渲染完成之后会输出 Layer Tree。Layer Tree 被送入 Engine，Engine 会把 Layer Tree 调度到 GPU 线程，在 GPU 线程内合成（compsite）Layer Tree，然后由 Skia 2D 渲染引擎渲染后送入 GPU 显示。这里提到 Layer Tree 是因为我们即将要分析的渲染流水线绘制阶段最终输出就是这样的 LayerTree。所以绘制阶段并不是简单的调用 Paint 函数这么简单了，而是很多地方都涉及到 Layer Tree 的管理。

Flutter 只关心向 GPU 提供视图数据，GPU 的 VSync 信号同步到 UI 线程，UI 线程使用 Dart 来构建抽象的视图结构，这份数据结构在 GPU 线程进行图层合成，视图数据提供给 Skia 引擎渲染为 GPU 数据，这些数据通过 OpenGL 或者 Vulkan 提供给 GPU。

这里描述一下合成的概念，所谓合成就是因为我们绘制的页面结构复杂，如果直接交付给绘图引擎去进行图层渲染，可能会出现大量的渲染内容重绘，因此，需要先进性一次图层合成，就是说先把所有的图层根据大小、层级等规则计算出最终的显示效果，将相同的图层合并，简化渲染树，提升渲染效率。

Flutter 会将合成之后的数据，交给 Skia 进行页面二维图层的渲染。

4、Widget 控件的更新策略

在这一个部分我们对比着 React 的设计方式对比着看一下 Flutter 的实现，在 React 中您可以看到三种很重要的名称。JSX、Virtual Dom、真实 Dom，而在 Flutter 中我们依然可以看到对应的三类抽象的数据结构分别是 Widget、Element 和 RenderObject，他们的功能与 React 内三个数据抽象有异曲同工之处。Flutter 绘制界面的基础是 Widget，也就是描述页面的最小模块。

Flutter 的核心设计思想就是 “一切皆 Widget”：

前端同学可以把 Widget 理解为 Web Component 的组件即可。一种结构化数据的抽象，包含了组件的布局、渲染属性、事件响应信息等。

1）Widget 类似 React VM 的 F(x) = Y 中的 x 存在

Flutter 中的 Widget 是完全不可变的！只要当视图发生变化，Flutter 就会重新创建一个新的 Widget 进行更新。即是 React 也是有一定的数据 Diff 的策略，而这里变更即创建的方式，会带来大量的销毁和重建的过程，是否非常消耗性能？

Widget 对标的是标识 React 的虚拟 DOM 节点的数据描述 JSX，不是真实渲染的页面 DOM。只是数据的抽象，不涉及视图渲染。并且 Widget 具有不可变性，也提升了 Widget 本身的复用性。因此并没大量的性能消耗，而 Dart 的作为静态语言的运行速度，也会有着超越 JS 的性能。

2）Element 是 Widget 的一个实例化对象

Element 承载了视图构建的上下文数据，是连接结构化的配置信息到完成最终渲染的桥梁； Element 是一个可变的数据结构，可以大致理解为 Virtual DOM。可以进行 diff 更新；可以将真正需要修改的数据同步到 RenderObject 中。最大程度的降低渲染视图的修改，提升渲染效率。

3）RenderObject 负责视图渲染的对象

Flutter 的渲染分为 4 个部分。布局、绘制、合成、渲染，其中布局和绘制是在 RenderObject 中完成的。 Flutter 采用深度优的方式渲染对象树，确定树中的各个对象的位置和尺寸，并把它绘制到不同图层，绘制完成之后交给
Skia 在 VSync 信号同步时从渲染树合成位图，然后交给 CPU 进而完成上屏。

4）Widget 同样分为有状态和无状态组件

无状态控件 StatelessWidget 类似 React 的 PFC。有状态控件 StatefulWidget 就是 React 的组件。如同 react 组件一样，使用有状态组件是有成本的。正确的评估你的需求，避免使用无意义的有状态组件。

这里比较大的区别，是 Flutter 直接把 Widget 设计成为了一个不可变的！ 这也导致了技术方案的实现上存在了差异。

5）既然看到了 Widget，那一定会有生命周期的存在

由于篇幅限制，这里就不在详细介绍了，简单描述一下，生命周期，让您有个影响。

**创建：**构造函数 --> initState --> didChangeDependencies --> build

更新: 主要由三个方法触发：setState、didChangeDependencies 和 didUpdateWidget。
销毁: 系统会调用 diactivate 和 dispose 这两个方法，来移除或销毁组件。

这里多了 APP 生命周期的概念，在传统 Web 我们相对关注较少

从后台切入前台：paused -> inactive -> resumed；
从前台退到后台：resumed-> inactive-> paused；

5、学习路线

粗略了整理了一下我最近这 2 周体验开发过程中认知的学习范围，这上面除了跟 APP 相关的部分，大部分场景已经通过代码体验和实践过了。这里由于篇幅限制，就不在一一的介绍了。最重要的是关注 Flutter 的官方文档。

其次，找了三个实例，跟您分享，您可以 clone 下来，更细节的体验一下：

布局案例：https://github.com/yang7229693/flutter-study
代码实例： https://github.com/nisrulz/flutter-examples
FlutterDemo: https://github.com/OpenFlutter/Flutter-Notebook

除了上面列出的这些，还有很多要做，比如运维、调试、自动化测试、兼容性、客户端 SDK 封装、国际化等等。当然对于开发者来说，工程化、调试、组件化都是非常重要的实践内容。

6、引文

作者： haigecao，腾讯 CSIG Web 开发工程

最后

题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。但苦于知识传播途径有限，很多程序员朋友无法获得正确的资料得到学习提升，故此将并将重要的Android进阶资料包括自定义view、性能优化、MVC与MVP与MVVM三大框架的区别、NDK技术、阿里面试题精编汇总、常见源码分析等录播视频免费分享出来。

【Android学习PDF+学习视频+面试文档+知识点笔记】

【Android思维脑图（技能树）】

知识不体系？这里还有整理出来的Android进阶学习的思维脑图，给大家参考一个方向。