【Flutter 专题】100 何为 Flutter Widgets ?

602 阅读4分钟

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

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 是否重建,当两个新旧 runtimeTypekey 相同时则更新 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 并没有实质性的作用,只是在父类和子类需要传递信息时使用;主要有 InheritedWidgetParentDataWidget 两类;

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

  final Widget child;
}

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

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

      InheritedWidgetParentDataWidget 涉及内容较多,小菜暂不做深入研究;

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 是在 RenderObjectRender Tree 中删除时调用;

Key / GlobalKey

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

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


      WidgetElementRenderObject 都是密不可分的,之后进一步学习 ElementRenderObject;小菜对底层的研究还不够深入;如有错误,请多多指导!

来源: 阿策小和尚