Flutter 视图树包含了 3 种树:

Widget:
存放渲染内容、视图布局信息,widget 的属性最好都是 immutable

Element:
存放上下文,通过 Element 遍历视图树,Element 同时持有 Widget 和 RenderObject

RenderObject:
根据 Widget 的布局属性进行 「布局(layout)」、「绘制( paint)」出Widget 传入的内容
下面通过画的图来了解一下:

 

Flutter 视图树

Widget

Flutter 视图树

Element

Flutter 视图树

RenderObject

这些类型都是什么意思呢?

组合型

Composer (设计者) 角色,将其他 widget 进行瓶装,组合成一个新的 widget

代理型

数据传递

展示型

具有实际展示内容的视图

那么这三颗树????是怎么联系起来,并且创建出来视图呢?

其实这三者是依次创建,并传递的。

首先,创建出 widget 树

然后,调用 runApp(rootWidget)方法,将rootWidget传递给rootElement

然后,通过上一步传递过来的rootWidget,作为rootElement的子节点,生成Element

最后,由Element树生成Render树。

这样,三棵树都生成好了。

相关文章:

  • 2022-12-23
  • 2021-08-05
  • 2022-12-23
  • 2021-10-03
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-02-03
  • 2021-06-05
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案