Flutter系列之Widget

一、Flutter的核心原则

Flutter包括一个现代的响应式框架、一个2D渲染引擎、现成的widget和开发工具

一切皆为widget

那么，什么是widget呢？

Widget是Flutter功能的抽象描述，是视图的配置信息，同样也是数据的映射，是Flutter开发框架中最基本的概念。与其他将视图（View）、控制器（Controller）、活动（Activity）、应用（Application）、布局（Layout）等属性分离的框架不同，在Flutter中都是Widget

Widget可以被定义为：一个结构元素（如按钮）；一个文本样式元素（如字体或颜色等）等等

Widget渲染过程

如何结构化地组织视图数据，提供给渲染引擎，最后完成界面显示呢

通常情况下，对于这一问题，不同的UI框架会以不同的方式处理，但无一例外地都会用到视图树（View Tree）的概念。而Flutter将视图树进行了扩展，把视图数据的组织和渲染抽象为三层：Widget、Element和RenderObject

这三部分的关系为：

Widget<----Element---->RenderObject

Widget

Widget是Flutter中对视图的一种结构化描述。Widget是控件实现的基本逻辑单位，里面存储的是有关视图渲染的配置信息，包括布局、渲染属性、事件响应等信息

Flutter将Widget设计成不可变的，所以当视图渲染的配置信息发生变化时，Flutter会选择重建Widget树的方式进行数据更新，以数据驱动UI构建的方式简单高效

但因为涉及到大量的对象销毁和重建，会对垃圾回收造成一定的压力，而由于Widget本身并不涉及实际的渲染，所以它只是一份轻量级的数据结构，重建的成本很低

Element

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

Flutter渲染过程：通过Widget树生成对应的Element树->创建相应的RenderObject并关联到Element.renderObject属性上->构建成RenderObject树，完成最终渲染

注意：Element同时持有Widget和RenderObject，但Element和Widget都不负责最终的渲染，只是负责发送命令，最终的渲染则是由RenderObject负责完成

既然Element和Widget只是负责发送命令，那为何不直接由Widget发送命令给RenderObject，从而省略Element呢

Element树存在的意义：因为Widget具有不可变性，但Element是可变的，而Element树将Widget树的变化做了抽象，只将变化的部分同步到RenderObject树中，从而最大程度的降低对真实渲染视图的修改，进而提高渲染效率

RenderObject

RenderObject主要负责实现视图渲染工作

Flutter通过控件树（Widget树）中的每个控件（Widget）创建不同类型的渲染对象，组成渲染对象树，而渲染对象树在Flutter中的展示分为四阶段：布局、绘制、合成及渲染。其中，布局和绘制由RenderObject负责完成，Flutter采用深度优先机制遍历渲染树对象，确定树种每个对象的位置和尺寸，并把他们绘制到不同的图层上。绘制完毕后，合成及渲染则交给Skia完成

已同步更新至微信公众号，欢迎关注“Android小白营”