Flutter中Element和RenderObject有什么区别？

Question

我对 Flutter 中的

Widget

和

Element

以及

RenderObject

感到困惑。据我所知，屏幕上显示的UI是

Element

，

Widget

只是一个蓝图。

文档说： Element 是树中特定位置的 Widget 的实例。那么，Widget 是 Dart 类，Element 是该类的实例，对吗？

那么，我可以把它们想象成下图这样吗？

但是，我读了这篇文章，我看到屏幕上显示的 UI 是

RenderObject

，而不是

Element

。所以，我对

Widget

和

Element

和

RenderObject

感到困惑。我图像上真正的兰博基尼是 RenderObject 还是 Element？

Answer 1

那么，Widget 是一个 Dart 类，Element 是该类的实例，对吧？

好吧，

Widget

和

Element

都是Dart类。

当文档说'实例化'时，它并不意味着从类中创建实例。

这意味着，正如您所提到的，

Widget

是某种蓝图（保存一些信息），而

Element

是由相应的

Widget

制成的其他东西。

Widget

生成

Element

，而

Element

生成

RenderObject

（通过使用 Widget 的方法）。

并且

RenderObject

是用于将内容渲染到屏幕上的实际东西。

我的图像上真正的兰博基尼是 RenderObject 还是 Element？

所以，你图片上的兰博基尼就是用

RenderObject

制作的，当然幕后也用了

Widget

和

Element

。

Answer 2

RenderObjects 更接近指针事件的直接渲染和命中测试，但这给我留下了一个问题：Elements 到底在做什么，为什么不取消 Element 树，只用 RenderObjects 做所有事情？

显然有些元素，ComponentElement，并没有真正生成 RenderObject。

本节是我在文档中找到的全部内容。听起来元素树（出于某种原因？）往往会产生很多额外的部分，如果可以在 RenderObject 树上完成布局，布局会更快。 RenderObject 树中似乎还有一些额外的类型信息。

对我来说，这听起来像是反对元素树存在的另一个论点，而关注点分离论点似乎可能是错误的，因为元素似乎最终不包含很多功能，并且由于Element 和 RenderObject 的功能趋于重叠的程度。总的来说，我认为 flutter 可能犯了这个错误，但我不确定。