Flutter：Widget构建时生成长度约1000的大列表的性能问题咨询

这个实现方案存在明确的性能隐患，当列表长度为1000时会产生大量不必要的性能开销，严重情况下会导致Widget构建卡顿、页面掉帧，当前方案不合理，核心问题如下： #

核心问题点 #

• 列表生成逻辑写在了无缓存的getter listWithValues 中，每次访问该属性都会重新生成全量列表：
  1. 计算itemCount时会触发第一次全量列表生成，拿到长度后立即丢弃该列表
  2. 每次itemBuilder访问下标取数据时，都会再次触发全量列表生成，仅展示首屏10个元素就会额外生成10次全量列表，1000条数据的场景下重复计算开销会被放大上百倍
• 全量预生成DateTime.now()属于不必要的提前计算：即使需要每个元素对应的时间，全量预生成也会浪费不可见区域元素的计算资源
• 虽然使用了支持懒加载的ListView.builder，但上层数据逻辑的冗余开销已经完全抵消了懒加载的性能优势

优化方案 #

调整思路为「数据按需生成、缓存复用」，参考实现如下：

// State类中定义缓存变量
late List<Map<String, Object>> _cachedList;

@override
void initState() {
  super.initState();
  // 仅在初始化/依赖变更时生成一次数据，缓存复用
  _cachedList = List.generate(myListLength, (index) {
    return  {'value': index, 'date': DateTime.now()};
  });
}

// 如果myListLength会动态变化，添加对应更新逻辑
@override
void didUpdateWidget(covariant OldWidget oldWidget) {
  super.didUpdateWidget(oldWidget);
  if (oldWidget.myListLength != myListLength) {
    _cachedList = List.generate(myListLength, (index) {
      return  {'value': index, 'date': DateTime.now()};
    });
  }
}

@override
Widget build(BuildContext context) {
  return ListView.builder(
    itemCount: _cachedList.length,
    itemBuilder: (context, i) {
      return ListTile(
        title: Text(_cachedList[i]['value'].toString()),
      );
    }
  );
}

如果date需要取元素渲染时的实时时间，可以完全取消预生成列表，直接在itemBuilder中计算：

@override
Widget build(BuildContext context) {
  return ListView.builder(
    itemCount: myListLength,
    itemBuilder: (context, i) {
      return ListTile(
        title: Text(i.toString()),
        subtitle: Text(DateTime.now().toString()),
      );
    }
  );
}

优化后1000条长度的列表不会有额外性能问题，符合Flutter性能规范。

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