flutter 的三棵树

 

程序员编写的代码里的 widget 树最终变成上图最左边的一棵树 widget tree，这是因为一些 widget 除了代码里赋给的子树，还会视情况增加一些 widget(s)

中间是 element tree 其中结点和widget tree 中节点一一对应

最右边是 render tree,  其中的节点和 element tree 中的 render object element 一一对应， 或者说 component element 只起到功能性的作用，不参与最终的绘制，比如 provider, comsumer 这一类的 widget, 并不涉及最终的 ui 的样子。