ListView Builder加载千条记录滚动卡顿问题及优化方案咨询

针对单页展示1000条记录时ListView Builder滚动卡顿的问题，以下是几个落地性强的优化思路：

1. 把列表项做“轻量化”处理 #

• 别在Item的build方法里塞太多嵌套Widget，层级越深，布局计算越耗性能。建议把复杂的列表项拆成独立的StatelessWidget，减少builder里的冗余代码。
• 绝对不要在builder里做耗时操作（比如解析JSON、计算复杂公式），这些工作提前在数据预处理阶段完成，给builder直接喂处理好的数据。

// 反面示例：在builder里实时解析
ListView.builder(
  itemCount: 1000,
  itemBuilder: (context, index) {
    final parsedData = parseRawData(rawList[index]); // 耗时操作
    return Column(
      children: [
        Text(parsedData.title),
        // 一堆嵌套Widget...
      ],
    );
  },
)

// 优化后：提前处理数据
final processedList = rawList.map((item) => parseRawData(item)).toList();

ListView.builder(
  itemCount: 1000,
  itemBuilder: (context, index) {
    return SimpleListItem(data: processedList[index]); // 轻量化Widget
  },
)

2. 合理使用状态保留（别滥用） #

如果你的列表项有需要保留的状态（比如输入框内容、展开面板状态），可以用AutomaticKeepAliveClientMixin，但一定要把wantKeepAlive设为按需返回——不需要保留状态的项就设为false，不然1000条都保留状态会把内存撑爆，反而更卡。

class StatefulListItem extends StatefulWidget {
  final Data data;
  const StatefulListItem({super.key, required this.data});

  @override
  State<StatefulListItem> createState() => _StatefulListItemState();
}

class _StatefulListItemState extends State<StatefulListItem> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => widget.needsKeepAlive; // 按需控制

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用这句
    return TextField(controller: TextEditingController(text: widget.data.content));
  }
}

3. 用Release模式测性能 #

Debug模式下Flutter会做很多额外的检查（比如布局边界、性能监控），这些都会拖慢滚动速度。测试1000条数据的滚动流畅度时，一定要用Release模式运行：

flutter run --release

4. 调优列表的缓存和布局参数 #

• 调整cacheExtent：ListView默认会缓存当前视口前后250dp的内容，1000条数据可以适当调小这个值（比如150dp），减少内存占用，避免不必要的预加载。
• 绝对不要开shrinkWrap: true：这个参数会让ListView先计算所有子项的高度，1000条数据的话初始加载直接卡爆，保持默认的false就好。

ListView.builder(
  cacheExtent: 150.0, // 按需调整，不要太大或太小
  shrinkWrap: false, // 必须关闭
  itemCount: 1000,
  itemBuilder: (context, index) => SimpleListItem(data: processedList[index]),
)

5. 避免无意义的状态更新 #

如果列表项需要更新状态，别在每个Item里单独调用setState，尽量把状态提升到父组件，或者用Provider、Riverpod这类状态管理工具，减少不必要的Widget重建。

6. 用ListView.separated做分割线 #

如果列表需要分割线，直接用ListView.separated，比在每个Item里手动加Divider高效得多——它会复用分割线的布局逻辑，减少重复计算。

ListView.separated(
  itemCount: 1000,
  separatorBuilder: (context, index) => const Divider(height: 1, color: Colors.grey),
  itemBuilder: (context, index) => SimpleListItem(data: processedList[index]),
)

7. 图片优化（如果列表里有图） #

• 提前压缩图片：确保图片尺寸和列表项的显示尺寸匹配，别加载几MB的大图再缩成小图，浪费资源。
• 本地缓存网络图片：滚动时别重复下载同一张图，用本地缓存机制存下来，下次直接取缓存。

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