ListView 中一行数据变了，为什么整页都在重建？

列表里点了一行“完成”，日志却显示页面的 build 又执行了一次。打开重建统计后，屏幕上不少组件都在闪，看起来像是改一条数据，整页都重新画了一遍。

先别急着优化。这里经常混淆了两件事：父组件重新执行 build，以及整页重新布局、绘制和栅格化。

核心结论：如果列表数据由页面 State 持有，页面调用 setState 后重新执行 build 是正常行为。但 Rebuild 不等于整页完成 Relayout、Repaint 和 Raster，是否需要缩小范围要看实际帧耗时。

为什么父页面会重建

常见代码如下：

class _TaskPageState extends State<TaskPage> {
  final List<Task> _tasks = [];
 
  void toggleTask(int index) {
    setState(() {
      final task = _tasks[index];
      _tasks[index] = task.copyWith(completed: !task.completed);
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: _tasks.length,
      itemBuilder: (context, index) {
        final task = _tasks[index];
        return TaskRow(
          key: ValueKey(task.id),
          task: task,
          onChanged: () => toggleTask(index),
        );
      },
    );
  }
}

setState 标记的是当前 _TaskPageState，不是 _tasks[index] 那一小块。所以下一帧中，页面的 build 会重新执行。

Flutter 会复用能够匹配的 Element 和 RenderObject。没有变化的渲染属性，不一定继续触发布局或绘制。因此，页面打印了 build 日志，不等于整页重新渲染。

`ListView.builder` 会把所有行都重建吗

ListView.builder 按需创建列表项，主要维护当前可见区域及附近缓存区域，不会因为列表有一万条数据就一次构建一万行。

父列表重建时，可见区域中的 itemBuilder 可能再次执行。成本主要取决于：

当前同时存在多少行；
每行的 build 是否轻量；
是否在 Build 中解析、排序或创建昂贵对象；
是否频繁触发布局、图片解码或复杂绘制。

一个几十行、每行结构简单的列表，即使父页面重建，也可能完全满足帧预算。

把一行提取成 TaskRow 有利于职责和可读性，但不保证它不再重建。

父页面每次 build 都可能创建新的 TaskRow 配置。Flutter 会根据类型和 Key 匹配已有 Element，再决定如何更新。

要真正缩小通知范围，状态读取也要移动到行级边界，而不只是移动代码文件。

什么时候把更新缩小到一行

如果测量确认 Build 阶段确实过重，可以让每一行只订阅自己的状态。

下面用 ValueNotifier 展示最小思路：

class TaskRowController {
  TaskRowController(Task initial) : task = ValueNotifier(initial);
 
  final ValueNotifier<Task> task;
 
  void toggle() {
    final current = task.value;
    task.value = current.copyWith(completed: !current.completed);
  }
 
  void dispose() => task.dispose();
}
 
class TaskRow extends StatelessWidget {
  const TaskRow({
    required this.controller,
    super.key,
  });
 
  final TaskRowController controller;
 
  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<Task>(
      valueListenable: controller.task,
      builder: (context, task, child) {
        return CheckboxListTile(
          value: task.completed,
          title: Text(task.title),
          onChanged: (_) => controller.toggle(),
        );
      },
    );
  }
}