Flutter源码分析笔记：Widget类源码分析

Flutter源码分析笔记 Widget类源码分析

---

- 文章信息 -

Author: 李俊才 (jcLee95)
Visit me at: https://jclee95.blog.csdn.net
Email: [email protected].
Shenzhen China
Address of this article:https://blog.csdn.net/qq_28550263/article/details/132259681

---

【介绍】：本文记录阅读与分析Flutter源码 - Widget类源码分析。

---

1. 概述

Widget类是Flutter框架中的核心类之一，用于描述用户界面的一部分。它是一个不可变的描述，可以被实例化为元素（Element），后者负责管理底层的渲染树。

Widget是Flutter框架的基础，用于描述用户界面的一部分，不可变且无状态。它有一些用于实例化元素、诊断调试和比较的方法和属性，同时它的子类可以是StatelessWidget或StatefulWidget，用于构建静态或有状态的用户界面部分。

这部分源码见附录F-1。

2. 属性

2.1 key

key属性控制一个widget如何替换树中的另一个widget。如果两个widget的runtimeType和key属性分别通过operator==比较是相等的，那么新的widget将通过更新底层元素来替换旧的widget。否则，旧的元素会从树中移除，新的widget会被实例化为元素，然后插入树中。

3. 方法

3.1 createElement()

该方法将配置实例化为一个具体的元素（Element）。一个widget可以在树中被包含零次或多次，每次被包含在树中时，都会被实例化为一个元素。

3.2 canUpdate(Widget oldWidget, Widget newWidget)

该方法用于判断一个新的widget是否可以用来更新一个已有元素的配置。根据runtimeType和key属性的比较来判断两个widget是否可以更新。

3.3 debugFillProperties(DiagnosticPropertiesBuilder properties)

debugFillProperties(DiagnosticPropertiesBuilder properties)：向诊断信息属性构建器添加属性，用于调试和诊断。在子类中可以重写以提供更多的调试信息。

3.4 _debugConcreteSubtype(Widget widget)

返回一个数值，表示特定Widget子类型的具体编码。用于在热重载时判断已挂载元素的配置是否被修改。

3.5 其它

operator ==(Object other) 和 get hashCode

实现运算符”==“用于判断两个widget是否相等，以及计算它们的哈希值。

toStringShort()

返回此widget的简短文本描述，通常是它的runtimeType和key的组合。

4. 继承关系

4.1 Widget的父类

Widget 是一个抽象类，继承自 DiagnosticableTree（这个类表示诊断树，主要用于提供调试信息），因此继承了一些用于调试和诊断的方法和属性。

4.2 Widget的子类

4.2.1 StatefulWidget 和 StatelessWidget

Widget 本身没有可变状态，它的所有字段都必须是 final。如果需要关联可变状态，应该使用 StatefulWidget，后者在被实例化为元素并添加到树中时会创建一个State对象。Widget的子类可以是 StatelessWidget（始终以相同的方式构建）或 StatefulWidget（可以在其生命周期内多次构建）。

StatefulWidget： 这是一个带有可变状态的 Widget 类别。它由两部分组成：一个是不可变的描述部分（Widget），另一个是可变的状态部分（State）。StatefulWidget 实例在构建过程中可以改变其状态，当状态发生变化时，相关的 State 对象会被重新构建以更新界面。适用于有变化状态的部分，比如用户输入、数据加载等。
StatelessWidget： 这是一个不可变的 Widget 类别，其描述和外观在整个生命周期内保持不变。StatelessWidget 实例在构建时不会持有可变状态，因此适用于不需要变化的 UI 部分，如图标、文本等。

Widget可以被多次包含在树中，每次都会被实例化为元素。如果某个 widget 在树中出现多次，它将被多次实例化。

4.2.2 RenderObjectWidget

RenderObjectWidget是Flutter渲染引擎的一部分，表示屏幕上的可见对象，它又有LeafRenderObjectWidget、SingleChildRenderObjectWidget、MultiChildRenderObjectWidget这三个子类。

• LeafRenderObjectWidget： 这是一种将 RenderObject 无需管理子元素的 Widget 类别。它通常用于将自定义的绘制逻辑封装为 Widget，然后通过构建 RenderObject 进行绘制。
• SingleChildRenderObjectWidget： 这是一种管理单个子元素的 RenderObjectWidget 类别。它会创建一个单一的子元素，并将其作为子节点传递给 RenderObject 进行渲染。
• MultiChildRenderObjectWidget： 这是一种管理多个子元素的 RenderObjectWidget 类别。它会创建多个子元素，并将它们作为子节点传递给 RenderObject 进行渲染。比如 Stack、Column 和 Row 等都是 MultiChildRenderObjectWidget 的子类。

4.2.3 ProxyWidget

ProxyWidget提供一种方式来包装 Widgets，以实现特定的功能。它是一个具有子Widget的Widget，而非新的Widget

• ParentDataWidget： 这是一个用于修改子 Widget 布局约束的 ProxyWidget 子类。它在渲染树中修改子元素的布局信息，例如 Positioned 和 Align 等都是 ParentDataWidget 的子类，用于指定子元素的位置和对齐方式。
• InheritedWidget： 这是一种特殊类型的 ProxyWidget，它允许在 Widget 树中向下传递共享的数据，而不需要显式地传递。当 InheritedWidget 更新时，其子孙节点会自动重新构建。适用于需要在多个部分之间共享数据的情况，如主题、语言等。

5. Widget树

Widget树的概念

在Flutter中，Widget 树是指由各种不同类型的Widget构成的层次结构。每个Widget描述了用户界面的一部分，可以是一个简单的元素，也可以是一个复杂的组合。这些Widget通过嵌套关系形成了一个树状结构，被称为Widget树。这种嵌套关系定义了界面中各个部分的排列和组织方式。

Widget树是构建用户界面的基本模型。当 Flutter 应用程序运行时，它会从一个 根Widget 开始，然后逐级构建出整个界面。每个Widget都有一个与之相关联的Element，负责管理底层的渲染树。渲染树最终会被转化为可视的UI元素，显示在屏幕上。

Widget树的特点

嵌套关系： Widget 树的节点由各种不同类型的 Widget 组成，这些 Widget 可以嵌套在彼此内部，形成层次结构。

不可变性： Widget 本身是 不可变 的，一旦创建就不能再进行修改。如果需要更新界面，通常是通过创建新的Widget来替换旧的Widget。

构建方式： 构建 Widget 树通常是通过构建方法来完成的。在构建方法中，你可以创建和组合不同的 Widget，从而构建出整个界面。

热重载： Flutter支持热重载，这意味着你可以在不重新启动应用程序的情况下快速修改和查看界面的变化。在热重载期间，Flutter会比较新旧Widget树的差异，并尽可能地保留应用程序的状态。

响应式： Flutter的界面是响应式的，意味着当数据发生变化时，相关的Widget会自动更新。这是通过在StatefulWidget 中管理可变状态来实现的。

F. 附录

F.1 Widget类源码

abstract class Widget extends DiagnosticableTree {
  /// Initializes [key] for subclasses.
  const Widget({ this.key });

  /// Controls how one widget replaces another widget in the tree.
  ///
  /// If the [runtimeType] and [key] properties of the two widgets are
  /// [operator==], respectively, then the new widget replaces the old widget by
  /// updating the underlying element (i.e., by calling [Element.update] with the
  /// new widget). Otherwise, the old element is removed from the tree, the new
  /// widget is inflated into an element, and the new element is inserted into the
  /// tree.
  ///
  /// In addition, using a [GlobalKey] as the widget's [key] allows the element
  /// to be moved around the tree (changing parent) without losing state. When a
  /// new widget is found (its key and type do not match a previous widget in
  /// the same location), but there was a widget with that same global key
  /// elsewhere in the tree in the previous frame, then that widget's element is
  /// moved to the new location.
  ///
  /// Generally, a widget that is the only child of another widget does not need
  /// an explicit key.
  ///
  /// See also:
  ///
  ///  * The discussions at [Key] and [GlobalKey].
  final Key? key;

  /// Inflates this configuration to a concrete instance.
  ///
  /// A given widget can be included in the tree zero or more times. In particular
  /// a given widget can be placed in the tree multiple times. Each time a widget
  /// is placed in the tree, it is inflated into an [Element], which means a
  /// widget that is incorporated into the tree multiple times will be inflated
  /// multiple times.
  @protected
  @factory
  Element createElement();

  /// A short, textual description of this widget.
  @override
  String toStringShort() {
    final String type = objectRuntimeType(this, 'Widget');
    return key == null ? type : '$type-$key';
  }

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

  @override
  @nonVirtual
  bool operator ==(Object other) => super == other;

  @override
  @nonVirtual
  int get hashCode => super.hashCode;

  /// Whether the `newWidget` can be used to update an [Element] that currently
  /// has the `oldWidget` as its configuration.
  ///
  /// An element that uses a given widget as its configuration can be updated to
  /// use another widget as its configuration if, and only if, the two widgets
  /// have [runtimeType] and [key] properties that are [operator==].
  ///
  /// If the widgets have no key (their key is null), then they are considered a
  /// match if they have the same type, even if their children are completely
  /// different.
  static bool canUpdate(Widget oldWidget, Widget newWidget) {
    return oldWidget.runtimeType == newWidget.runtimeType
        && oldWidget.key == newWidget.key;
  }

  // Return a numeric encoding of the specific `Widget` concrete subtype.
  // This is used in `Element.updateChild` to determine if a hot reload modified the
  // superclass of a mounted element's configuration. The encoding of each `Widget`
  // must match the corresponding `Element` encoding in `Element._debugConcreteSubtype`.
  static int _debugConcreteSubtype(Widget widget) {
    return widget is StatefulWidget ? 1 :
           widget is StatelessWidget ? 2 :
           0;
  }
}