Flutter-布局的树结构分析

Flutter布局的树结构

flutter中有三棵树，分别是Widget树、Element树、RenderObject树。
其中Widget中只存放基本的配置信息，可以当作就是一个数据结构，而RenderObject是实际渲染使用的，layout和paint等操作都是RenderObject完成的。
Element则是存放上下文的，同时持有Widget和RenderObject，并且负责处理state的状态变化。

State的生命周期

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4FJkc64w-1600399525671)(/images/state_lifecycle.jpg)]

setState

State.setState() -> _element.markNeedsBuild()

setState就是将该widget标记为dirty，然后会在下一帧进行rebuild

从创建到渲染的大体流程是：根据Widget生成Element，然后创建相应的RenderObject并关联到Element.renderObject属性上，最后再通过RenderObject来完成布局排列和绘制。
他们的依赖关系是：Element树根据Widget树生成，而渲染树又依赖于Element树

Element的生命周期

1、Framework 调用Widget.createElement创建一个Element实例，记为element
2、Framework 调用