Flutter Widget

 

Widget  翻译为：小器具，装饰品，窗口小部件

中心思想是用widget构建你的UI。 Widget描述了他们的视图在给定其当前配置和状态时应该看起来像什么。当widget的状态发生变化时，widget会重新构建UI，Flutter会对比前后变化的不同， 以确定底层渲染树从一个状态转换到下一个状态所需的最小更改（类似于React/Vue中虚拟DOM的diff算法）。

Everything's a Widget

在flutter的世界里，包括views,view controllers,layouts等在内的概念都建立在Widget之上。widget是flutter功能的抽象描述。

widget和view的关系

widget是对页面UI的一种描述。他功能类有点似于android中的xml，或者web中的html。widget在渲染的时候会转化成element。Element相比于widget增加了上下文的信息。element是对应widget，在渲染树的实例化节点。由于widget是immutable的，所以同一个widget可以同时描述多个渲染树中的节点。但是Element是描述固定在渲染书中的某一个特定位置的点。简单点说widget作为一种描述是可以复用的，但是element却跟需要绘制的节点一一对应。那element是最终渲染的view么？抱歉，还不是。element绘制时会转化成rendObject。RendObject才是真正经过layout和paint并绘制在屏幕上的对象。在flutter中有三套渲染相关的tree，分别是：widget tree， element tree & rendObject tree。

flutter是响应式的框架。在某一时刻页面的布局，可能受不同的输入源的影响。Element这层实际上做了对某一时刻事件的汇总，在将真正需要修改的部分同步到真实的rendObject tree上。这么做有两个好处：

• 1.不需要直接操作UI，改为通过数据驱动视图。代码表达可以更加精炼。
• 2.最大层度降低对最终真实视图(rendObject tree)的修改，提高页面渲染效率。

转自：https://www.jianshu.com/p/9e6c470ea5bf