Flutter列表滚动卡顿怎么优化？

打工人子轩提问于 2026-03-18 21:46:22 阅读 87

移动

我用ListView.builder加载了上百条带图片的数据，滑动时明显掉帧，试过加const widget和cacheExtent也不太行。是不是图片没处理好？

这是我在Item里用的样式：

.item-container {
  width: 100%;
  padding: 12px;
  border-bottom: 1px solid #eee;
}
.item-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
}

前端优化打包优化

我来解答赞 9 收藏

反馈

2 条解答

百里一诺 Lv1

你提到的问题确实和图片处理有关系，但不止这么简单。我给你几个建议：

首先检查你的图片加载方式，尽量用CachedNetworkImage或者FadeInImage来替代直接的Image.network，这样可以避免每次滚动都重新加载图片。

CachedNetworkImage(

  imageUrl: item.imageUrl,

  placeholder: (context, url) => CircularProgressIndicator(),

  errorWidget: (context, url, error) => Icon(Icons.error),

)

然后看看你的Item widget能不能拆分得更细一些，只把需要更新的部分设为可变状态，其他部分保持不变。比如图片和文字信息可以分成两个独立的小部件。

另外记得开启ListView.builder的addAutomaticKeepAlives选项，这个默认是打开的，但确认下比较好。

如果还是卡，考虑下lazy load，别一次性加载所有数据，用Pagination的方式来逐步加载内容。

最后就是检查下你的样式代码了，虽然问题主要在图片加载上，但简洁的样式也有助于性能提升。试试把你的.item-container和.item-image样式简化一下，去掉不必要的属性。希望这些能帮到你，优化这种问题挺头疼的，慢慢调试吧。

2026-03-26 00:02

Mc.柯佳 Lv1

图片这块没处理好是大概率原因。给你几个实打实的优化方向：

第一，强烈建议用cached_network_image代替Image.network。它自带缓存和占位图，不会每次滑动都触发网络请求。代码大概是这样：

CachedNetworkImage(

  imageUrl: item.imageUrl,

  width: 60,

  height: 60,

  fit: BoxFit.cover,

  placeholder: (context, url) => Container(

    width: 60,

    height: 60,

    color: Colors.grey[200], // 占位背景

  ),

  errorWidget: (context, url, error) => Icon(Icons.error),

)

第二，记得给图片指定cacheWidth和cacheHeight。Flutter默认会按原图尺寸缓存，很占内存。60px的展示区域完全没必要缓存原图：

CachedNetworkImage(

  imageUrl: item.imageUrl,

  cacheWidth: 120, // 2倍像素密度，清晰度更好

  cacheHeight: 120,

  // ...

)

第三，检查你的Item Widget有没有不必要的重绘。确保用const构造函数，build方法里不要创建新的Widget对象。如果Item里还有其他复杂组件，考虑用RepaintBoundary包一下：

RepaintBoundary(

  child: ItemWidget(...),

)

第四，如果数据量确实很大，可以考虑用ListView的itemExtent属性指定固定高度，这样Flutter不用每次都去计算每个item的高度，能提升不少：

ListView.builder(

  itemExtent: 84, // 60px图片 + 12px上下padding + 边框

  itemBuilder: (context, index) => ItemWidget(...),

)

还有一个小提醒：如果你这列表是频繁更新的（比如实时聊天或者数据会变），记得用AutomaticKeepAliveClientMixin保持住状态，不然每次滚动出去再回来会重新加载。

基本上就是图片缓存没做好导致的，优先换cached_network_image + 限制缓存尺寸这两步，卡顿应该能明显改善。

2026-03-18 22:02