Flutter 渲染原理

1、Flutter 渲染原理


v2-75f96e1898d47521c91b6de1ac0e4c91_r.jpg

Flutter框架包含Flutter Framework(Dart)、Flutter Engine(C/C++)、Embedber(Android/iOS平台层)。其中:
Flutter Framework(Dart):实现了一套基础库, 用于处理动画、绘图和手势,并且基于绘图封装了一套 UI组件库,然后根据 Material 和Cupertino两种视觉风格区分开来。这个纯 Dart实现的 SDK被封装为了一个叫作 dart:ui的 Dart库。我们在使用 Flutter写 App的时候,直接导入这个库即可使用组件等功能。
Flutter Engine(C/C++):包括 Skia引擎、Dart运行时、文字排版引擎等。它是 Dart的一个运行时,它可以以 JIT 或者 AOT的模式运行 Dart代码。这个运行时还控制着 VSync信号的传递、GPU数据的填充等,并且还负责把客户端的事件传递到运行时中的代码。
渲染流程:GPU的VSync信号同步给到UI线程,UI线程使用Dart来构建抽象的视图结构(这里是Framework层的工作),绘制好的抽象视图数据结构在GPU线程中进行图层合成(在Flutter Engine层的工作),然后提供给Skia引擎渲染为GPU数据,最后通过OpenGL或者 Vulkan提供给 GPU,GPU渲染好传递给显示器显示。

UI界面绘图流程


v2-b2a9d17b97899261f5d3efe310a5cc93_1440w.jpg

用户输入是驱动视图更新的信号,如滑动屏幕等。然后会触发动画进度更新,框架开始build抽象视图数据,在之后,视图会进行布局、绘制、合成(渲染过程的三个步骤),最后进行光栅化处理把数据生成一个个真正的像素填充数据。在Flutter中,构建视图数据结构、布局、绘制、合成、与Engine的数据同步和通信放到了Framework层,而光栅化则放在了Engine层中。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容