Flutter 100: 何为 Flutter Widgets ？

小菜学习 Flutter 有一段时间了，其中 Flutter 的核心思想是 Everything is Widget；但是什么是 Widget 它与我们常说的 Element 和 RenderObject 有什么关系呢，小菜就个人理解简单整理一下；

Widget

源码分析

abstract class Widget extends DiagnosticableTree {
  const Widget({ this.key });

  final Key key;

  @protected
  Element createElement();

  @override
  String toStringShort() {
    return key == null ? '$runtimeType' : '$runtimeType-$key';
  }

  @override
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
    properties.defaultDiagnosticsTreeStyle = DiagnosticsTreeStyle.dense;
  }

  static bool canUpdate(Widget oldWidget, Widget newWidget) {
    return oldWidget.runtimeType == newWidget.runtimeType
        && oldWidget.key == newWidget.key;
  }
}

简单分析源码和注释可得，Widget 继承自 DiagnosticableTree 是该树上的一个对象；

Widget 描述了 Element 的配置，只是用来保存属性的容器；
createElement() 用来生成一个 Element 对象并添加到 Widget 树中；
toStringShort() 是对该 Widget 的简短说明，包括 Widget 类型和对应的 Key 等；
canUpdate() 用来判断当前 Widget 是否重建，当两个新旧 runtimeType 和 key 相同时则更新 Widget 否则会新建一个 Widget 替代老旧的 Widget；

子类 Widget

Widget 主要有三类子类 Widget；分别是组合类 Widget(StatelessWidget/StatefulWidget)、代理类 Widget(ProxyWidget)、渲染类 Widget(RenderObjectWidget)；

1. StatelessWidget / StatefulWidget

StatelessWidget 是状态不可变的 Widget，主要通过 build() 方法，把一个或多个 Widget 整合成一个新的 Widget；这也完全符合 Flutter 【组合大于继承】的思想；StatelessWidget 的核心方法就是 build() 方法，把多个 Widget 组合包装成一个新的 Widget；

abstract class StatelessWidget extends Widget {
  const StatelessWidget({ Key key }) : super(key: key);

  @override
  StatelessElement createElement() => StatelessElement(this);
  
  @protected
  Widget build(BuildContext context);
}

StatefulWidget 是状态可变的 Widget，而其核心是 State 状态管理；常用的 setState(){} 便是用来更新重构 Widget；

abstract class StatefulWidget extends Widget {
  const StatefulWidget({ Key key }) : super(key: key);

  @override
  StatefulElement createElement() => StatefulElement(this);

  @protected
  State createState();
}

State 用于处理 StatefulWidget 业务逻辑和状态管理，有 _StateLifecycle 生命周期进行维护；

created 对象创建，在 initState() 生命周期时执行；
initialized 对象初始化，在 didChangeDependencies() 过程中执行；initState() 只是创建了 State 对象但是未初始化完成；
ready 对象准备好且 dispose() 方法未执行；
defunct 对象销毁，在 dispose() 执行时进行销毁；

2. ProxyWidget

ProxyWidget 作为一个抽象的代理 Widget 并没有实质性的作用，只是在父类和子类需要传递信息时使用；主要有 InheritedWidget 和 ParentDataWidget 两类；

abstract class ProxyWidget extends Widget {
  const ProxyWidget({ Key key, @required this.child }) : super(key: key);

  final Widget child;
}

使用过 Bloc 或 Provider 等状态管理的朋友都了解过 InheritedWidget，主要都是对 InheritedWidget 的优化和封装；可以在树结构中传递信息，当使用 InheritedWidget 时，子类状态变更时可以通知父类进行对应的变更；小菜简单理解为数据上移；

而 ParentDataWidget 与 InheritedWidget 作用方向相反，用于为具有多个子类的 RenderObjectWidget 提供对于的配置等，例如 Stack 使用已定位好的父类 Widget 来定位每个子 Widget；小菜简单理解为数据下移；

InheritedWidget 和 ParentDataWidget 涉及内容较多，小菜暂不做深入研究；

3. RenderObjectWidget

RenderObjectWidget 是真正用于绘制渲染 Widget，一切在屏幕上展示的 Widget 根本上都离不开 RenderObjectWidget；它提供了 RenderObjectElement 的创建配置和 RenderObject 渲染对象的规定，提供了应用程序的实际渲染；

abstract class RenderObjectWidget extends Widget {
  const RenderObjectWidget({ Key key }) : super(key: key);

  @override
  RenderObjectElement createElement();

  @protected
  RenderObject createRenderObject(BuildContext context);

  @protected
  void updateRenderObject(BuildContext context, covariant RenderObject renderObject) { }
  
  @protected
  void didUnmountRenderObject(covariant RenderObject renderObject) { }
}

updateRenderObject 是在 Widget 更新后，修改对应的 RenderObject 对象，在每次更新时都会调用；didUnmountRenderObject 是在 RenderObject 在 Render Tree 中删除时调用；

Key / GlobalKey

Key 可以用来控制在 Widget 重建时是否与其他 Widget 匹配，只有 Key 和 runtimeType 同时一致才会认为是同一个 Widget；Key 在构建相同类型 Widget 的多个实例时很有用，例如 List 列表中多个相同类型的 item，可以提高列表效率；

GlobalKey 可以作为应用全局唯一标识，在整个 Widget 层级中都是唯一的，可以使用 GlobalKey 来检索与 Widget 关联的状态；

Widget 与 Element 和 RenderObject 都是密不可分的，之后进一步学习 Element 和 RenderObject；小菜对底层的研究还不够深入；如有错误，请多多指导！

来源：阿策小和尚