【封神之作】终章 - Flutter 渲染小册
1. Flutter 系列小册发展史
历经漫漫岁月,从 2020年11月11日
起 《Flutter 绘制指南 - 妙笔生花》的发布,至今已有一年半的时光了。如今 Flutter
框架层的进阶探索
已经算是终结了,整个框架层的运行流程尽收眼底,《Flutter 渲染机制 - 聚沙成塔》算是给这场旅行画上完美的句号。
下面给这六本 进阶探索
一个全家福:
小册名称 | 发布时间 | 代码仓库 | 售价(RMB) |
---|---|---|---|
《Flutter 绘制指南 - 妙笔生花》 | 2020年11月11日 | idraw | 3.28 |
《Flutter 手势探索 - 执掌天下》 | 2021年05月13日 | itouch | 3.5 |
《Flutter 动画探索 - 流光幻影》 | 2021年07月09日 | ianim | 3.5 |
《Flutter 滑动探索 - 珠联璧合》 | 2022年02月10日 | iscroll | 3.5 |
《Flutter 布局探索 - 薪火相传 》 | 2022年03月30日 | ilayout | 3.5 |
《Flutter 渲染机制 - 聚沙成塔 》 | 2022年04月27日 | irender | 3.5 |
这六本小册的创作史,也是我对 Flutter
认知的成长史。本系列还剩最后一本 《Flutter 语言基础 - 梦始之地》,这本将为 无编程基础
的朋友进行入门引导。
2.小册简介
通过前面 绘制
、 动画
、手势
三本小册,对 Framework
层的 Painting
、Animation
、Gestures
进行了单独的研究。之后又通过 布局
和 滑动
两个小册,以 Widgets
层为切入点,通过对 滑动
和 布局
组件的源码研究,认识了 Rendering
层的一些知识。
而本册将站在更高的视角,去探索 Flutter 框架中从 Widget
到渲染到屏幕之上,所经历的所有流程。在此期间,我们会遇到到被框架封装的各种角色,认识他们的作用和关系。可以从全局的视角去看待 Widget
的分类、去理解 State
的价值、去见证在界面更新中的对象的变与不变。
3. 小册内容介绍
对于渲染机制来说,主要包括两个方面:构建流程 和 渲染流程 。本册针对这两个方面,分为4个模块:
模块一:从 runApp 开始探索,逐步了解三棵树的概念,及形成过程。 一开始,单刀直入,直指构建核心,探索 Widget
是如何从一个配置信息结构,一步步使 元素树
和 渲染树
成型的。大家也许都知道在框架内有树
的概念,但应该很少人知道: 元素树
和 渲染树
的数据结构在实现上是有很大差异的,这也是我们想要主要探索的。
模块二:了解 Element 和 Widget 的族系衍生,以及 State 和 Key 在更新时的作用 。 我们都知道 Widget
在 Flutter
中非常多和繁杂,从表面上很难去对它们进行归类,不识庐山真面目
,只缘身在此山中
。但从源码的角度,就可以跳出表象的束缚,从根源上其去发现共性,思考它们进行族系分化的必要性和意义。这是理解 构建流程
非常重要的模块。
模块三:探索 WidgetsBinding 的初始化与两个 Owner 的源码实现。 这一部分会从 WidgetsBinding
初始化流程中,学到很多 mixin
相关的使用细节。另外从源码分析两个非常重要的管理者,BuildOwner
用于管理 构建流程
中的Element
;PipelineOwner
用于管理 渲染流程
中的 RenderObject
。抓住这两个对象,就相当于拿捏了渲染机制的命脉,这里也为后面探索渲染流程打下基础。
模块四:对渲染流程进行分析,探索 RenderObject 、Layer 的源码核心和总结篇。 这是最后一块,探索 RenderObject
是如何工作的,Layer
是如何形成树的,最终又是什么决定屏幕渲染内容的。最后,会对本册进行一个总结,从全新的视角去认识 Flutter
框架。
最后:由于纯手工码字
以及认知的局限性,如果本册内容上有什么错误
、疑问
、错别字
或修改建议
,可在评论区指正,或直接联系我进行探讨。
也希望我眼中的风采,你也可以看到,最后感谢大家一直以来的支持与陪伴 ~
转载自:https://juejin.cn/post/7091195894883680292