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 是该树上的一个对象；

1. Widget 描述了 Element 的配置，只是用来保存属性的容器；
2. createElement() 用来生成一个 Element 对象并添加到 Widget 树中；
3. toStringShort() 是对该 Widget 的简短说明，包括 Widget 类型和对应的 Key 等；
4. 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 生命周期进行维护；

1. created 对象创建，在 initState() 生命周期时执行；
2. initialized 对象初始化，在 didChangeDependencies() 过程中执行；initState() 只是创建了 State 对象但是未初始化完成；
3. ready 对象准备好且 dispose() 方法未执行；
4. 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；小菜对底层的研究还不够深入；如有错误，请多多指导！

来源： 阿策小和尚