Flutter 框架实现原理

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

Flutter 框架实现原理

简版架构图

• 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信号不断地触发帧的绘制

从构建到渲染流程

构建UI体系的四棵树

Widget

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

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构建过程

光栅化

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

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

视频课程

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

如需要获取完整的Flutter全栈式开发课程，请 点击跳转