Widget Tree：什么是它、结构及其在部件树中的角色

Flutter 中什么是 Widget Tree？

Widget Tree — 是 Flutter 中用户界面的声明式描述，以嵌套部件树的形式构建。每个部件定义 UI 的一部分：其配置、显示参数和交互时的行为。开发人员描述界面在当前应用程序状态下的外观，Flutter 负责将此描述转换为屏幕上的像素。

Flutter 的声明式方法

与开发人员直接操作界面元素的命令式框架不同，Flutter 使用声明式方法。当应用程序状态发生变化时，会创建一个新的 Widget Tree，框架计算新旧树之间的差异。这最大限度地减少了绘制操作的数量，并使代码更可预测。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Widget Tree")),
        body: Center(
          child: Column(
            children: [
              Text("你好，Flutter"),
              ElevatedButton(
                onPressed: () {},
                child: Text("按我"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个例子中，Widget Tree 由 MaterialApp、Scaffold、AppBar、Center、Column、Text 和 ElevatedButton 组成。每个部件都是树的一个节点。当应用程序状态改变时，Flutter 会重新调用 build 方法并将结果与之前的树进行比较。

Widget Tree 的结构：根部件和子部件

Widget Tree 从传递给 runApp 方法的根部件开始。根部件通常是 MaterialApp、CupertinoApp 或 WidgetsApp — 设置应用程序的全局设置。从根部开始，树分支成子部件，每个子部件又可以包含自己的后代。

单子和多子部件

Flutter 中的部件分为 single-child（通过 child 参数接受一个子部件）和 multi-child（通过 children 接受子部件列表）。single-child 示例：Center、Padding、SizedBox、Container。multi-child：Column、Row、Stack、ListView、GridView。这种差异影响 Widget Tree 的结构：multi-child 部件创建更宽的树，而 single-child 部件创建更深的树。

BuildContext 在树中的角色

BuildContext — 是部件在 Widget Tree 中的位置。每个部件都有自己的 BuildContext，它被传递给 build 方法，用于访问父部件、主题、MediaQuery 和其他 InheritedWidget。BuildContext 是部件与其在 Element Tree 中元素之间的桥梁。

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final mediaQuery = MediaQuery.of(context);
    return Container(
      color: theme.colorScheme.primary,
      child: Text(
        "屏幕宽度：${mediaQuery.size.width}"
      ),
    );
  }
}

在这个例子中，BuildContext 用于获取主题和屏幕尺寸。Flutter 在 Widget Tree 中向上移动到最近的 Theme 和 MediaQuery，它们是 InheritedWidget。这显示了上下文如何将部件与其在层次结构中的位置连接起来。

Flutter 如何在启动时构建 Widget Tree？

启动 Flutter 应用程序时，会调用 runApp 函数，它接收根部件并开始构建 Widget Tree。该过程包括三个阶段：创建部件配置、形成 Element Tree 和构建 RenderObject Tree 以进行实际绘制。

第 1 阶段：创建根部件

runApp 函数通过 WidgetsFlutterBinding 创建根元素，将框架与图形引擎连接。根部件被放置在树中，Flutter 调用 build 方法用子部件填充它。每次 build 调用都会生成 Widget Tree 的一个新的子图。

第 2 阶段：初始布局

构建 Widget Tree 后，Flutter 执行初始布局 — 计算所有部件的尺寸和位置。这个过程从根部开始并向下延伸到树中。每个部件从父部件接收约束并返回计算的尺寸。如果尺寸不匹配，Flutter 会生成布局错误。

第 3 阶段：在屏幕上绘制

布局完成后，Flutter 开始绘制每个部件。RenderObject 将界面描述转换为 GPU 通过 Skia 或 Impeller 执行的图形命令。整个过程 — 从 Widget Tree 到像素 — 在每次状态更新时重复，频率高达每秒 120 帧。

StatelessWidget 和 StatefulWidget 在树层次结构中

StatelessWidget — 是没有内部可变状态的部件。其外观完全由通过构造函数传递的输入参数决定。如果参数没有改变，StatelessWidget 不会重建。这使得它在性能方面很轻量。

何时使用 StatelessWidget

对界面的静态元素使用 StatelessWidget：图标、文本标签、装饰性分隔符和没有内部逻辑的简单按钮。根据 Flutter 文档，典型应用程序中大约 70% 的部件可以是 StatelessWidget，这减少了垃圾收集器的负载并加速了 rebuild。

StatefulWidget 和状态管理

StatefulWidget 创建一个 State 对象，该对象在部件重建之间保留。当状态改变时（通过 setState 调用），Flutter 将部件标记为“脏”并在下一帧重建它。StatefulWidget 允许实现交互式元素：输入字段、动画、定时器和动态列表。

class CounterWidget extends StatefulWidget {
  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text("计数：$_count"),
        ElevatedButton(
          onPressed: () {
            setState(() => _count++);
          },
          child: Text("增加"),
        ),
      ],
    );
  }
}

在这个例子中，StatefulWidget 使用 setState 来更改计数器。当状态更新时，Flutter 只重建 Widget Tree 中改变的部分 — CounterWidget 部件及其后代。父部件不会重建，这是 Flutter 声明式模型的关键优势。

Widget Tree 如何与 Element Tree 关联

Widget Tree 是配置层，而 Element Tree 是部件与实际绘制之间的中间环节。Widget Tree 中的每个部件在 Element Tree 中创建一个元素，该元素存储对部件的引用并管理生命周期。这种架构使 Flutter 能够高效地处理更改。

从部件创建元素

当 Flutter 第一次遇到一个部件时，它会调用 createElement 方法，该方法创建相应的元素。对于 StatelessWidget，创建 StatelessElement；对于 StatefulWidget，创建 StatefulElement，它还会创建 State 对象。元素在 rebuild 周期之间保留，即使部件被重新创建。

Element Tree 中的键机制

Key — 是一个标识符，帮助 Flutter 匹配新旧 Widget Tree 中的部件。如果部件有 Key，Flutter 会用它在树中找到相应元素，而不是根据位置。在处理元素顺序可能改变的动态列表时，键是必需的。

ListView(
  children: items.map((item) => ListItem(
    key: ValueKey(item.id),
    data: item,
  )).toList(),
)

没有 Key，Flutter 会根据位置匹配元素，这在顺序改变时可能导致状态保存不正确。带有唯一标识符的 ValueKey 保证每个元素保持其状态，无论其在列表中的位置如何。

Widget Tree 对性能的影响

Widget Tree 的结构直接影响 Flutter 应用程序的性能。具有大量嵌套部件的深层树需要更多时间进行布局阶段并增加内存消耗。Flutter DevTools 提供了分析 Widget Tree 和识别瓶颈的工具。

过度嵌套

每个嵌套级别在布局和绘制中添加额外的计算。不要使用深层链式嵌套，而是使用更扁平的结构。例如，带有 Expanded 的 Row 可以替换多个带有 Align 的嵌套 Container。根据 Flutter Team 的数据，树优化可以将布局时间减少多达 40%。

• 布局 — 每个父部件将约束传递给子部件并接收尺寸返回，这在深层嵌套中创建了计算链。
• 绘制 — 每个部件可以创建一个单独的绘制层，过度嵌套会增加层数。
• 内存 — Element Tree 中的每个元素占用内存，多余的部件会增加资源消耗。

Widget Tree 分析工具

Flutter DevTools 提供 “Widget Inspector” 部件，实时显示当前的 Widget Tree。开发人员可以选择屏幕上的任何部件，查看其在树中的位置、参数和布局约束。这有助于识别意外的嵌套、不必要的 rebuild 和尺寸问题。

用于优化的 RepaintBoundary

RepaintBoundary — 是一个隔离 Widget Tree 部分以进行独立绘制的部件。如果 RepaintBoundary 的内容发生更改，只有其区域会被重绘，而不是整个屏幕。将 RepaintBoundary 用于动画、列表和其他频繁更新的元素。

RepaintBoundary(
  child: CustomPaint(
    painter: MyPainter(),
    child: SizedBox(
      width: 200,
      height: 200,
    ),
  ),
)

在这个例子中，RepaintBoundary 将 CustomPaint 隔离到一个单独的绘制区域。当该区域内的动画更新时，只有 CustomPaint 部件被重绘，屏幕的其余部分保持不变。这在具有多个动画元素的复杂界面中特别有用。