Flutter里的Widget 到底是什么

Widget 到底是什么呢？

Widget 是 Flutter 功能的抽象描述，是视图的配置信息，同样也是数据的映射，是 Flutter 开发框架中最基本的概念。前端框架中常见的名词，比如视图（View）、视图控制器（View Controller）、活动（Activity）、应用（Application）、布局（Layout）等，在 Flutter 中都是 Widget。

Flutter 的核心设计思想便是“一切皆 Widget”。

Widget 渲染过程

Flutter 把视图数据的组织和渲染抽象为三部分：分别是 Widget，Element 和 RenderObject。

这3者之间的关系如下：

Widget

Widget 是 Flutter 世界里对视图的一种结构化描述，你可以把它看作是前端中的“控件”或“组件”。Widget 是控件实现的基本逻辑单位，里面存储的是有关视图渲染的配置信息，包括布局、渲染属性、事件响应信息等。

注意：widget是不可变的，视图渲染信息变更时，会触发widget视图树重建，这样做的成本是 会有大量的对象被销毁，重建。会对gc造成压力，幸运的是，不涉及实际渲染位图，重建成本很低。

Element

Element 是 Widget 的一个实例化对象，它承载了视图构建的上下文数据，是连接结构化的配置信息到完成最终渲染的桥梁。

Flutter 渲染过程，可以分为这么三步：

首先，通过 Widget 树生成对应的 Element 树；

然后，创建相应的 RenderObject 并关联到 Element.renderObject 属性上；

最后，构建成 RenderObject 树，以完成最终的渲染。

RenderObject

RenderObject 是主要负责实现视图渲染的对象。

渲染对象树在 Flutter 的展示过程分为四个阶段，即布局、绘制、合成和渲染。 其中，布局和绘制在 RenderObject 中完成，Flutter 采用深度优先机制遍历渲染对象树，确定树中各个对象的位置和尺寸，并把它们绘制到不同的图层上。绘制完毕后，合成和渲染的工作则交给 Skia 搞定。

Flutter 通过引入 Widget、Element 与 RenderObject 这三个概念，把原本从视图数据到视图渲染的复杂构建过程拆分得更简单、直接，在易于集中治理的同时，保证了较高的渲染效率。

如果用 Vue 来比喻的话，Widget 就是 Vue 的 template；Element 就是 virtual DOM；RenderObject 就是DOM。