Flutter AnimatedList刷新时全量构建项而非仅可见项的问题及解决

原因分析 #

1. 首次加载的懒加载逻辑：AnimatedList继承自ListView，首次启动时依赖ListView的懒加载优化，只会构建当前视口内可见的列表项，这就是首次日志只打印到index 18的原因。
2. 批量插入的强制构建行为：你调用的insertAllItems(0, _items.length)方法，内部设计是为每个插入的位置触发一次itemBuilder调用——不管该项是否在视口内。因为它需要为每个插入元素创建入场动画，所以会强制构建全部100个项，导致卡顿。哪怕你设置了极短的动画时长，AnimatedList依然会完成整个批量插入流程，触发所有项的构建。
3. removeAllItems的状态清空影响：removeAllItems会将AnimatedList的内部状态清空为0项，之后的批量插入相当于从无到有添加所有元素，完全跳过了ListView的懒加载逻辑。

解决方案 #

根据是否需要保留刷新动画，提供两种方案：

方案一：无动画刷新（推荐，完全复用懒加载） #

如果刷新不需要删除/插入动画，直接更新数据源后调用setState，让AnimatedList回到初始的懒加载状态，仅构建可见项：

修改_onUpdate方法：

void _onUpdate() {
  // 模拟数据源更新（这里可以替换成你的实际数据更新逻辑）
  setState(() {
    _items
      ..clear()
      ..addAll(List.generate(100, (index) => "Updated Item at $index"));
  });
}

方案二：带动画的懒加载刷新（适合必须保留动画的场景） #

如果需要保留刷新时的动画效果，避免批量插入所有项，可通过滚动控制器获取当前可见的索引范围，仅对可见项执行删除/插入动画，同时更新数据源：

void _onUpdate() {
  // 获取当前滚动位置的可见索引范围（假设ListTile高度为56，可根据实际调整）
  final startIndex = (_scrollController.offset / 56).floor().clamp(0, _items.length - 1);
  final endIndex = (startIndex + 20).clamp(0, _items.length - 1); // 假设可见20项

  // 先删除可见范围内的项（倒序删除避免索引混乱）
  for (int i = endIndex; i >= startIndex; i--) {
    _listKey.currentState?.removeItem(
      i,
      (context, animation) => SizeTransition(
        sizeFactor: animation,
        child: _buildItemWidget(_items[i]),
      ),
      duration: _durationMin,
    );
  }

  // 更新数据源
  _items
    ..clear()
    ..addAll(List.generate(100, (index) => "Updated Item at $index"));

  // 插入可见范围内的新项
  for (int i = startIndex; i <= endIndex; i++) {
    _listKey.currentState?.insertItem(i, duration: _durationMin);
  }
}

注意：这种方法需要手动估算可见项数量和item高度，若你的列表项高度不固定，可通过ScrollController的position.getRenderObject()获取更精准的可见范围。

内容的提问来源于stack exchange，提问作者matteoh