文章目录
- Flutter 框架实现原理
- UI 构建原理
- Widget
- Element
- RenderObject
- Layer
- UI构建过程
- 视频课程
博主相关文章列表
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构建过程
光栅化
合成已经理解了,那么什么是光栅化呢?
光栅化也称栅格化,是指将几何数据经过一系列变换后最终转换为像素,从而呈现在显示设备上的过程。光栅化的本质是坐标变换、几何离散化。