Flutter Widgets — 什么是 widget 树和 build

什么是 Flutter Widgets？

Flutter Widgets —— Flutter 框架中所有 UI 元素，实现为不可变的 (immutable) Dart 类。Widget 是 UI 元素的配置：其大小、颜色、位置、事件处理。与 Android (XML + View) 或 iOS (Storyboard + UIView) 不同，Flutter 不使用原生组件 —— 一切由 Skia (Android/iOS/Linux) 或 Impeller (iOS/macOS) 引擎在 Canvas 上绘制。这确保了在所有平台上具有相同的外观，没有平台差异。Flutter 附带两套 widgets：Material Widgets（适用于 Android/Web 的 Google Material Design 3 设计）和 Cupertino Widgets（适用于 iOS/macOS 的 Apple HIG 设计）。开发人员可以在一个应用程序中组合这两套 widgets。每个 widget 都有一个 build() 方法，该方法返回一个子 widget 或它们的组合 —— 这就是构建 widget 树的方式。

Flutter 的三棵树

Flutter 使用三棵树运行：Widget Tree（配置，由开发人员创建）、Element Tree（将 widget 与树中的位置匹配，由框架管理）、Render Tree（计算布局和执行绘制的对象）。Widget 创建 Element，Element 创建 RenderObject。Element 在配置更改 (rebuild) 时被复用 —— 这是 Flutter 的优化机制：如果 widget 类型和 key 匹配，则不重新创建 Element，而是更新新配置。理解这三棵树是优化 Flutter 应用程序性能的关键。

StatelessWidget：不可变的 widgets

StatelessWidget —— 不存储内部状态的 widget。它通过构造函数接收参数，并在构建后无法更改。StatelessWidget 非常适合静态元素：标题、图标、头像、具有固定数据的列表。build() 方法在创建时和父 widget 更改时调用一次。由于 StatelessWidget 没有状态，它不需要单独的 State 对象 —— build() 直接在 widget 类中定义。

import 'package:flutter/material.dart';

class ProfileHeader extends StatelessWidget {
  final String name;
  final String avatarUrl;

  const ProfileHeader({super.key, required this.name, required this.avatarUrl});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        CircleAvatar(
          radius: 24,
          backgroundImage: NetworkImage(avatarUrl),
        ),
        const SizedBox(width: 12),
        Text(
          name,
          style: const TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
    );
  }
}

ProfileHeader —— 通过构造函数接收 name 和 avatarUrl 的 StatelessWidget。CircleAvatar 显示头像，Text 显示名称。Widget 在创建后无法更改这些值。使用 const 构造函数 (const ProfileHeader) 允许 Flutter 在父级重建时复用 widget 实例 —— 这是推荐用于所有 StatelessWidget 的微优化。

StatefulWidget：具有状态的 widgets

StatefulWidget —— 具有可变状态的 widget，存储在单独的 State 对象中。StatefulWidget 本身像 StatelessWidget 一样是不可变的。可变部分被提取到 State 中：State —— 创建一个对象，该对象在 widget 的多次重建中仍然存在。当状态更改时 (setState())，Flutter 调用 State 的 build()，更新 UI。StatefulWidget 用于交互式元素：计数器、文本字段、复选框、动画、定时器。

import 'package:flutter/material.dart';

class LikeButton extends StatefulWidget {
  const LikeButton({super.key});

  @override
  State<LikeButton> createState() => _LikeButtonState();
}

class _LikeButtonState extends State<LikeButton> {
  bool liked = false;
  int count = 42;

  void _toggleLike() {
    setState(() {
      liked = !liked;
      count += liked ? 1 : -1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _toggleLike,
      child: Text(liked ? '♥ $count' : '♡ $count'),
    );
  }
}

LikeButton —— 带有 State 类 _LikeButtonState 的 StatefulWidget。liked 和 count 字段是存储在 State 中的状态，在重建时不会重置。setState() 通知 Flutter 需要重建 UI。Flutter 不会在每次父级重建时重新创建 State —— 仅在配置更改时（key 或 widget 类型）。在 IT Sectr，我们使用 StatelessWidget 进行显示，使用 StatefulWidget 进行交互式组件，遵循将 StatefulWidget 最小化到变更边界的原则。

Widget 树：从 Widget 到 RenderObject

Widget Tree —— 描述应用程序 UI 的 widget 层次结构。Flutter 将 Widget Tree 转换为 Element Tree：每个 Widget 创建一个 Element，跟踪其在树中的位置以及与 RenderObject 的连接。Render Tree 执行布局（确定大小和位置）和绘制。Element 是关键优化层：如果 widget 类型和 key 在重建时没有更改，则 Element 被复用，更新配置而无需重新创建 RenderObject。这确保了 Flutter 在高帧率 (60/120 FPS) 下的性能。

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Widgets')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Icon(Icons.flutter_dash, size: 80),
            const SizedBox(height: 16),
            const Text(
              '你好，Flutter！',
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
    );
  }
}

HomeScreen 的 widget 树：Scaffold → AppBar + Center → Column → [Icon, SizedBox, Text]。Scaffold —— Material Design 的主要布局 widget。Center 居中子 Column。Column 垂直排列子元素，居中对齐 (mainAxisAlignment.center)。Flutter 从上到下计算布局（约束从父级传递），从下到上计算大小（sizedByParent 或 sizing from children）。

BuildContext：构建上下文和对树的访问

BuildContext —— widget 在 Element Tree 中位置的描述符。每个 build() 方法都接收 BuildContext，通过它 widget 可以访问：MediaQuery（屏幕大小、方向、像素密度、安全区域）、Theme (MaterialThemeData 或 CupertinoThemeData)、Navigator（导航栈）、ScaffoldMessenger (SnackBar)、InheritedWidget（沿树向下传递数据）。BuildContext 不应在 build() 完成后存储或在同步上下文之外使用 —— 这会导致诸如 "Scaffold.of() called with a context that does not contain a Scaffold" 的错误。与其存储 context，不如使用 Builder widget 或 InheritedWidget 模式来访问数据。

Key：在树中标识 widget

Key —— 每个 widget 构造函数的可选参数 (super.key)。Key 帮助 Flutter 在列表中元素顺序/数量更改时标识 widget。没有 key，Flutter 根据类型和位置比较 widget；在不使用 key 的情况下向列表中间添加元素时，Flutter 为错误的 widget 复用 Element，导致状态 (StatefulWidget) 和动画错误。对于列表使用 ValueKey（唯一标识符）、ObjectKey（基于数据对象）、UniqueKey（每次重建保证唯一 —— 用于强制重新创建）。

Flutter widget 目录：Material、Cupertino、Layout

Flutter SDK（稳定版本 3.3+、Dart 3+）包含 200 多个内置 widget，分为以下几类：Layout (Row, Column, Stack, Container, Expanded, Flexible, Wrap, GridView, ListView, CustomScrollView)、Material Design (Scaffold, AppBar, Card, Drawer, BottomNavigationBar, FloatingActionButton, TabBar, Chip, DataTable)、Cupertino (CupertinoPageScaffold, CupertinoNavigationBar, CupertinoButton, CupertinoTabBar)、Painting & Effects (Opacity, DecoratedBox, ClipRect, Transform, BackdropFilter, ShaderMask)、Async (FutureBuilder, StreamBuilder) 和 Accessibility (Semantics, MergeSemantics, ExcludeSemantics)。Layout widget 是每个 Flutter UI 的基础：Row 用于水平序列、Column 用于垂直序列、Stack 用于重叠元素、Container 与 BoxDecoration 用于装饰。