Flutter 框架实现原理

分手后的思念是犯贱 2023-03-06 05:11 24阅读 0赞

### 文章目录 ###

*  Flutter 框架实现原理
 *   *  UI 构建原理
     *   *  Widget
         *  Element
         *  RenderObject
         *  Layer
         *  UI构建过程
     *  视频课程

博主相关文章列表  
[**Flutter 框架实现原理**][Flutter]  
[**Flutter 框架层启动源码剖析**][Flutter 1]  
[**Flutter 页面更新流程剖析**][Flutter 2]  
[**Flutter 事件处理源码剖析**][Flutter 3]  
[**Flutter 路由源码剖析**][Flutter 4]  
[**Flutter 安卓平台源码剖析（一）**][Flutter 5]  
[**Flutter 自定义控件之RenderObject**][Flutter _RenderObject]

# Flutter 框架实现原理 #

简版架构图

![简版图][format_png]

*  **Framework**：一个纯 Dart代码的 SDK。它实现了一套基础库， 包含动画、绘制和手势处理。并基于绘制封装了一套Widget控件库，这套控件库还根据 `Material` 和`Cupertino`两种设计风格进行了风格化区分。
 *  **Engine**：一个 C++实现的 SDK。其包含了 Skia引擎、Dart运行时、文字排版引擎等。在安卓上，系统自带了Skia，在iOS上，则需要APP打包Skia库，这会导致Flutter开发的iOS应用安装包体积更大。 Dart运行时则可以以 JIT、JIT Snapshot 或者 AOT的模式运行 Dart代码。

其中 `dart:ui`库是对**Engine**中Skia库的C++接口的绑定。向上层提供了 `window`、`text`、`canvas`等通用的绘制能力，通过 `dart:ui`库就能使用Dart代码操作Skia绘制引擎。所以我们实际上可以通过实例化`dart:ui`包中的类（例如Canvas、Paint等）来绘制界面。然而，除了绘制，还要考虑到协调布局和响应触摸等情况，这一切实现起来都异常麻烦，这也正是Framework帮我们做的事。

渲染层`Rendering`是在`dart:ui`库之上的第一个抽象层，它为你做了所有繁重的数学工作（如跟踪计算坐标等）。为了做到这一点，它使用`RenderObject`对象，该对象是真正绘制到屏幕上的渲染对象。由这些`RenderObject`组成的树处理真正的布局和绘制。

在**Engine**之下，还包含一层**Shell**。这个单词是 “壳”的意思，这个壳组合了Dart运行时、第三方工具库、平台特性等，实现在不同平台调用和运行 Flutter应用。

总的来说， `dart:ui`给 Dart提供了绘制能力，Dart运行时为 Flutter提供了执行Dart代码的能力，而Shell将他们组合起来，并且将生成的数据渲染到不同的平台。

## UI 构建原理 ##

**Flutter 的渲染流水线**

屏幕上的每一帧的绘制过程，实际上是Engine通过接收的`VSync`信号不断地触发帧的绘制

![format_png 1][]

**从构建到渲染流程**

![format_png 2][]

**构建UI体系的四棵树**

![format_png 3][]

### Widget ###

是 Flutter中UI开发的基本单元。 一个Widget里面通常存储了视图的配置信息，包括布局、属性等。我们可以把它理解为一个UI元素的配置文件，类似于原生开发中的xml描述文件。所谓Widget树，就是我们手动编写的结构化的Widget代码，当被加载到内存时，就形成了Widget树。

![format_png 4][]

Flutter中，除了Widget树是我们自己编写的，另外三棵树都需要借助Widget树构建出来。

### Element ###

该对象实际上是一个上下文，将`Widget`与`RenderObject`映射关联起来。通过遍历Widget控件树来构建一个Element树结构。在原生开发中没有对应的概念，它的概念更接近于Web前端中的虚拟DOM，主要做的事情也是比较前后两次Widget的差异来决定如何更新真实的渲染对象树（RenderObject树）。

### RenderObject ###

真正的渲染对象。最接近原生开发中的UI控件元素。它主要处理UI构建过程中的布局与绘制。它依赖于Element树来生成一颗RenderObject树。

### Layer ###

该对象表示的是图层的意思。通常一棵RenderObject树经过绘制之后，就会生成一个Layer对象，但并不是所有RenderObject都会绘制到一个Layer中，某些情况下，例如不同路由页面，就会绘制到不同的Layer图层中。这些Layer对象组成的结构就是Layer树。

在绘制时，会根据 `isRepaintBoundary`是否为 true来决定是否绘制到新的图层。了解这一点，我们就可以使用`RepaintBoundary` 控件在外层包裹，然后通过设置该控件的`isRepaintBoundary`属性来提升绘制性能。因为 `isRepaintBoundary` 为 `true` 时，会形成了独立的 `Layer`，这样其他控件发生频繁的改变时，就不会影响到独立的图层，这个独立的图层也不会发生重绘，节省性能开销。

最后的最后，所有图层都交由 GPU 来负责合成并上屏显示。在渲染流程的最后两个步骤中，正是合成与光栅化。

### UI构建过程 ###

![format_png 5][]

**光栅化**

合成已经理解了，那么什么是光栅化呢？

![format_png 6][]

光栅化也称栅格化，是指将几何数据经过一系列变换后最终转换为像素，从而呈现在显示设备上的过程。光栅化的本质是坐标变换、几何离散化。

## 视频课程 ##

本篇博客视频内容可访问B站链接 [**框架实现原理**][Link 1] 您觉得有帮助，别忘了点赞哦

如需要获取完整的**Flutter全栈式开发课程**，请 [**点击跳转**][Link 2]  
![qr\_adv][qr_adv]

[Flutter]: https://blog.csdn.net/yingshukun/article/details/107813592
[Flutter 1]: https://blog.csdn.net/yingshukun/article/details/107813908
[Flutter 2]: https://blog.csdn.net/yingshukun/article/details/107814286
[Flutter 3]: https://blog.csdn.net/yingshukun/article/details/107814213
[Flutter 4]: https://blog.csdn.net/yingshukun/article/details/107814385
[Flutter 5]: https://arcticfox.blog.csdn.net/article/details/100543916
[Flutter _RenderObject]: https://blog.csdn.net/yingshukun/article/details/107814111
[format_png]: /images/20230208/b54d8c208a8d45139b7fdb8030c89418.png
[format_png 1]: /images/20230208/a4792470f8ea48a695042e54cd1ee3ee.png
[format_png 2]: /images/20230208/0101147725f9413c9ad4618194880a00.png
[format_png 3]: /images/20230208/28daae85f55b49e9b99797efeca40ee9.png
[format_png 4]: /images/20230208/5541c81be7ac4f4a8b07ea90ada1e6cc.png
[format_png 5]: /images/20230208/c6ee221ebae3446083c76a92fbb6618c.png
[format_png 6]: /images/20230208/3523c0558a054689b51866f20c83ade4.png
[Link 1]: https://www.bilibili.com/video/BV1gi4y1x7YS?p=40
[Link 2]: http://m.study.163.com/provider/480000001855430/index.htm?share=2&shareId=480000001855430
[qr_adv]: /images/20230208/6ece088d67ad42fba532e6de97977b8d.png