Flutter如何缓存CachedNetworkImage图片的宽高尺寸

在使用CachedNetworkImage加载网络图片时，我发现图片加载完成后会重新调整布局，导致页面跳动。查资料得知这是因为首次加载时无法获取图片的实际宽高，等图片下载完毕后才根据实际尺寸重新渲染。请问有什么方法可以预先缓存网络图片的宽高尺寸，避免布局重排？比如是否支持通过某种方式提前获取并存储图片尺寸信息，或者有没有现成的插件可以解决这个问题？

2 回复

使用CachedNetworkImage时，可通过cacheWidth和cacheHeight参数指定缓存图片的宽高尺寸。例如：

CachedNetworkImage(
  imageUrl: 'url',
  memCacheWidth: 200,
  memCacheHeight: 200,
)

这会在内存中缓存指定尺寸的图片，优化性能。

更多关于Flutter如何缓存CachedNetworkImage图片的宽高尺寸的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，使用CachedNetworkImage时，可以通过以下方式缓存图片的宽高尺寸：

主要方法

1. 使用 CachedNetworkImageProvider 获取图片尺寸

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';

class ImageSizeCache {
  static final Map<String, Size> _sizeCache = {};
  
  static Future<Size> getImageSize(String imageUrl) async {
    // 先从缓存中查找
    if (_sizeCache.containsKey(imageUrl)) {
      return _sizeCache[imageUrl]!;
    }
    
    // 获取图片尺寸
    final imageStream = CachedNetworkImageProvider(imageUrl).resolve(ImageConfiguration.empty);
    final imageInfo = await imageStream.first;
    final size = Size(
      imageInfo.image.width.toDouble(),
      imageInfo.image.height.toDouble()
    );
    
    // 缓存尺寸
    _sizeCache[imageUrl] = size;
    return size;
  }
}

2. 在实际使用中缓存尺寸

class MyImageWidget extends StatefulWidget {
  final String imageUrl;
  
  const MyImageWidget({super.key, required this.imageUrl});
  
  @override
  State<MyImageWidget> createState() => _MyImageWidgetState();
}

class _MyImageWidgetState extends State<MyImageWidget> {
  Size? _cachedSize;
  
  @override
  void initState() {
    super.initState();
    _cacheImageSize();
  }
  
  void _cacheImageSize() async {
    final size = await ImageSizeCache.getImageSize(widget.imageUrl);
    if (mounted) {
      setState(() {
        _cachedSize = size;
      });
    }
  }
  
  @override
  Widget build(BuildContext context) {
    return _cachedSize == null
        ? CircularProgressIndicator()
        : CachedNetworkImage(
            imageUrl: widget.imageUrl,
            width: _cachedSize!.width,
            height: _cachedSize!.height,
            fit: BoxFit.contain,
          );
  }
}

使用第三方缓存库

也可以使用 flutter_cache_manager 配合自定义缓存：

import 'package:flutter_cache_manager/flutter_cache_manager.dart';

class ImageSizeCacheManager {
  static final CacheManager _cacheManager = CacheManager(
    Config(
      'image_size_cache',
      stalePeriod: Duration(days: 30),
    )
  );
  
  static Future<Size> getImageSize(String url) async {
    // 实现类似上面的逻辑，但使用 CacheManager 持久化存储
  }
}

这种方法可以有效避免重复计算图片尺寸，提升应用性能。

回到顶部