likes
comments
collection
share

【封神之作】终章 - Flutter 渲染小册

作者站长头像
站长
· 阅读数 30

1. Flutter 系列小册发展史

历经漫漫岁月,从 2020年11月11日 起 《Flutter 绘制指南 - 妙笔生花》的发布,至今已有一年半的时光了。如今 Flutter 框架层的进阶探索已经算是终结了,整个框架层的运行流程尽收眼底,《Flutter 渲染机制 - 聚沙成塔》算是给这场旅行画上完美的句号。

【封神之作】终章 - Flutter 渲染小册


下面给这六本 进阶探索 一个全家福:

小册名称发布时间代码仓库售价(RMB)
Flutter 绘制指南 - 妙笔生花2020年11月11日idraw3.28
Flutter 手势探索 - 执掌天下2021年05月13日itouch3.5
Flutter 动画探索 - 流光幻影2021年07月09日ianim3.5
Flutter 滑动探索 - 珠联璧合2022年02月10日iscroll3.5
Flutter 布局探索 - 薪火相传2022年03月30日ilayout3.5
Flutter 渲染机制 - 聚沙成塔2022年04月27日irender3.5

这六本小册的创作史,也是我对 Flutter 认知的成长史。本系列还剩最后一本 《Flutter 语言基础 - 梦始之地》,这本将为 无编程基础的朋友进行入门引导。


2.小册简介

【封神之作】终章 - Flutter 渲染小册

通过前面 绘制动画手势 三本小册,对 Framework 层的 PaintingAnimationGestures 进行了单独的研究。之后又通过 布局滑动 两个小册,以 Widgets 层为切入点,通过对 滑动布局 组件的源码研究,认识了 Rendering 层的一些知识。

而本册将站在更高的视角,去探索 Flutter 框架中从 Widget 到渲染到屏幕之上,所经历的所有流程。在此期间,我们会遇到到被框架封装的各种角色,认识他们的作用和关系。可以从全局的视角去看待 Widget 的分类、去理解 State 的价值、去见证在界面更新中的对象的变与不变。

【封神之作】终章 - Flutter 渲染小册


3. 小册内容介绍

对于渲染机制来说,主要包括两个方面:构建流程渲染流程 。本册针对这两个方面,分为4个模块:

【封神之作】终章 - Flutter 渲染小册

模块一:从 runApp 开始探索,逐步了解三棵树的概念,及形成过程。 一开始,单刀直入,直指构建核心,探索 Widget 是如何从一个配置信息结构,一步步使 元素树渲染树 成型的。大家也许都知道在框架内有的概念,但应该很少人知道: 元素树渲染树 的数据结构在实现上是有很大差异的,这也是我们想要主要探索的。

【封神之作】终章 - Flutter 渲染小册

模块二:了解 Element 和 Widget 的族系衍生,以及 State 和 Key 在更新时的作用 。 我们都知道 WidgetFlutter 中非常多和繁杂,从表面上很难去对它们进行归类,不识庐山真面目只缘身在此山中。但从源码的角度,就可以跳出表象的束缚,从根源上其去发现共性,思考它们进行族系分化的必要性和意义。这是理解 构建流程 非常重要的模块。

【封神之作】终章 - Flutter 渲染小册

模块三:探索 WidgetsBinding 的初始化与两个 Owner 的源码实现。 这一部分会从 WidgetsBinding 初始化流程中,学到很多 mixin 相关的使用细节。另外从源码分析两个非常重要的管理者,BuildOwner 用于管理 构建流程 中的ElementPipelineOwner 用于管理 渲染流程 中的 RenderObject 。抓住这两个对象,就相当于拿捏了渲染机制的命脉,这里也为后面探索渲染流程打下基础。

【封神之作】终章 - Flutter 渲染小册

模块四:对渲染流程进行分析,探索 RenderObject 、Layer 的源码核心和总结篇。 这是最后一块,探索 RenderObject 是如何工作的,Layer 是如何形成树的,最终又是什么决定屏幕渲染内容的。最后,会对本册进行一个总结,从全新的视角去认识 Flutter 框架。

【封神之作】终章 - Flutter 渲染小册

最后:由于纯手工码字以及认知的局限性,如果本册内容上有什么错误疑问错别字修改建议,可在评论区指正,或直接联系我进行探讨。


也希望我眼中的风采,你也可以看到,最后感谢大家一直以来的支持与陪伴 ~

转载自:https://juejin.cn/post/7091195894883680292
评论
请登录