Flutter图片加载时UI卡顿问题求助

问题场景 #

开发新闻UI界面时，不展示API获取的图片时运行正常，一旦加载图片，UI就出现卡顿。相关实现代码如下：

Widget _buildNewsCard(Map<String, dynamic> article) {
  return Card(
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            article['title'],
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              children: [
                Text(
                  article['description'] ?? '',
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(color: Colors.white),
                ),
                if (article['urlToImage'] != null)
                  FadeInImage(
                    placeholder: AssetImage('assets/images/logo.png'), // Placeholder image
                    image: CachedNetworkImageProvider(article['urlToImage']),
                    width: 100, // Adjust the width as needed
                    height: 100, // Adjust the height as needed
                    fit: BoxFit.cover, // Image fit
                  ),
              ],
            ),
          ),
        ],
      ),
    ),
  );
}

解决方法 #

1. 替换为CachedNetworkImage组件 #

CachedNetworkImage本身封装了更完善的异步加载、缓存管理和内存优化逻辑，比FadeInImage+CachedNetworkImageProvider的组合性能更优。修改后的代码片段：

if (article['urlToImage'] != null)
  CachedNetworkImage(
    imageUrl: article['urlToImage'],
    placeholder: (context, url) => Image.asset('assets/images/logo.png'),
    errorWidget: (context, url, error) => Icon(Icons.error),
    width: 100,
    height: 100,
    fit: BoxFit.cover,
  ),

2. 限制图片解码尺寸 #

即使设置了width和height，Flutter默认会解码原始尺寸的图片，这会占用大量内存导致卡顿。可以通过ResizeImage强制缩小图片：

// 配合CachedNetworkImageProvider使用
image: ResizeImage.resizeIfNeeded(
  100, // 目标宽度
  100, // 目标高度
  CachedNetworkImageProvider(article['urlToImage']),
),

3. 优化列表加载逻辑 #

如果通过列表展示新闻卡片，必须使用ListView.builder做懒加载，只有卡片进入可视区域时才会构建和加载图片，避免一次性加载所有内容：

ListView.builder(
  itemCount: articles.length,
  itemBuilder: (context, index) => _buildNewsCard(articles[index]),
  // 可选：设置itemExtent提前固定高度，减少布局计算开销
  itemExtent: 200,
)

4. 调整缓存策略 #

自定义CacheManager限制缓存的最大内存占用和磁盘缓存大小，避免缓存过多图片导致内存压力：

final customCacheManager = CacheManager(
  Config(
    'news_image_cache',
    maxNrOfCacheObjects: 50, // 最多缓存50张图片
    stalePeriod: Duration(days: 7), // 缓存7天过期
  ),
);

// 在CachedNetworkImage中使用自定义缓存
CachedNetworkImage(
  cacheManager: customCacheManager,
  // 其他参数...
)

5. 启用图片内存缓存优化 #

在Flutter启动时配置图片缓存的最大内存上限，避免内存占用过高：

void main() {
  PaintingBinding.instance.imageCache.maximumSize = 100; // 内存缓存最多保留100张图片
  runApp(MyApp());
}

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