阅读 120

Flutter 框架实现原理

博主相关文章列表

Flutter 框架实现原理

Flutter 框架层启动源码剖析

Flutter 页面更新流程剖析

Flutter 事件处理源码剖析

Flutter 路由源码剖析

Flutter 安卓平台源码剖析

Flutter 自定义控件之RenderObject

Flutter 框架实现原理

简版架构图

简版图

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

其中 dart:ui库是对Engine中Skia库的C++接口的绑定。向上层提供了 windowtextcanvas等通用的绘制能力,通过 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

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

RenderObject

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

Layer

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

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

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

UI构建过程

光栅化

合成已经理解了,那么什么是光栅化呢?

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

视频课程

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

如需要获取完整的Flutter全栈式开发课程,请访问以下地址 Flutter全栈式开发之Dart 编程指南 二维码

Flutter 全栈式开发指南