Widget,Element,RenderObject的关系和相关概念

85 阅读1分钟

1.Widget

Widget,是UI配置信息,就是我们写的各种UI;是不可变的;界面渲染的每一个帧,都是固定的一个Widget。 Widget没有生命周期,构建一次,就固定不变。

Widget build(BuildContext context) { return Text('Hello'); // 这个 Text 是 Widget }

2.Element

是Widget在UI树中的实例;

有生命周期,可以持久存在,并复用;

管理Widget与RenderObject的绑定关系;

职责:

保存对Widget和RenderObject的引用;

当Widget更新时,通过Element判断是否需要重建RenderObject;

Widget build(BuildContext context) { return Text('Hello'); // 这个 BuildContext的实现类,就是Element } 之所以说Element是“大脑”,是因为Widget的加载、生命周期和更新等流程;RenderObject的创建、更新等时机;child的加载、更新等行为,都是通过Element实现或者执行的。

一个Widget会对应多个Element,Widget和Element是一对多的关系。

Element和RenderObject,是一对一的关系。

Widget和RenderObject,是一对多的关系。

例如: Container对应,RenderDecoratedBox,RenderPadding等多个组合。

3.RenderObject

RenderObject属于真正的绘制实例,它涉及了layout、paint等真实的界面操作,可以认为是一个真正的View,而它的配置信息如大小、颜色、位置等,是通过Widget传递过来的,所以才会有Widget转化为RenderObject实现绘制的说法。

widget.png