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

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

移动

我用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>

我来解答赞 12 收藏

反馈

2 条解答

IT人新红 Lv1

试试把图片加载改成渐进式加载，用cached_network_image包。还有就是检查一下itemWidget里是不是有不必要的重建，把不变的部分用const修饰。最后看看是不是数据量太大了，考虑分页加载。

import 'package:cached_network_image/cached_network_image.dart';



return ListView.builder(

  itemCount: items.length,

  itemBuilder: (context, index) {

    final item = items[index];

    return Container(

      child: Column(

        children: [

          CachedNetworkImage(imageUrl: item.image),

          Text(item.name)

        ],

      ),

    );

  },

);

2026-03-27 12:00

端木誉馨 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