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

凌薇 Dev 提问于 2026-03-01 20:33:18 阅读 22

移动

我用Flutter写了个商品列表页，数据一多滚动就明显卡顿，试过加const构造和ListView.builder，但效果不明显。是不是哪里写得不对？

附上我用Vue写的类似逻辑（供参考），在Web端很流畅：

<template>
  <div v-for="item in items" :key="item.id" class="item">
    <img :src="item.image" />
    <p>{{ item.name }}</p>
  </div>
</template>

我来解答赞 2 收藏

反馈

1 条解答

端木誉馨 Lv1

十有八九是图片没做缓存和尺寸限制，Flutter加载网络图片默认不解码复用，大图直接撑爆GPU。加上 cached_network_image 并设置 cacheWidth 试试：

CachedNetworkImage(

  imageUrl: item.image,

  memCacheWidth: 200, // 限制缓存尺寸，别让原图直接进内存

  fit: BoxFit.cover,

  placeholder: (context, url) => Container(color: Colors.grey[200]),

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

)

另外检查一下你的列表项有没有用 Opacity、ClipRRect 这种耗性能的Widget，能省就省，实在要圆角用 BorderRadius 配合 Container 的 decoration。

2026-03-01 21:01