Flutter开发MyAnimeList应用：缩略图缩放后模糊问题求助

问题根源 #

你当前代码中cacheWidth和cacheHeight直接使用了逻辑像素值（比如MediaQuery.size.width * 0.10），但Flutter的cacheWidth/cacheHeight要求传入的是物理像素值。逻辑像素会根据设备像素密度（devicePixelRatio）转换为实际显示的物理像素，直接用逻辑像素设置缓存尺寸，会导致缓存的图片分辨率远低于实际显示需求，缩放后自然模糊。

解决方案 #

在计算缓存宽高时，需要将逻辑像素乘以设备的像素密度，得到实际需要的物理像素值，再传给cacheWidth和cacheHeight。

修改后的代码 #

更新Thumbnail组件，加入像素密度的计算：

class Thumbnail extends StatelessWidget {
  final String url;
  final double? width;
  final double? height;

  const Thumbnail({
    super.key,
    required this.url,
    this.width,
    this.height,
  });

  @override
  Widget build(BuildContext context) {
    final pixelRatio = MediaQuery.of(context).devicePixelRatio;
    final cacheWidth = width != null ? (width! * pixelRatio).toInt() : null;
    final cacheHeight = height != null ? (height! * pixelRatio).toInt() : null;

    return ClipRRect(
      borderRadius: BorderRadius.circular(5),
      child: Image.network(
        url,
        fit: BoxFit.fill,
        width: width,
        height: height,
        cacheWidth: cacheWidth,
        cacheHeight: cacheHeight,
        filterQuality: FilterQuality.high,
        loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent? loadingProgress) {
          if (loadingProgress == null) return child;

          return Center(
            child: CircularProgressIndicator(
              value: loadingProgress.expectedTotalBytes != null
                  ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes!
                  : null,
            ),
          );
        },
      ),
    );
  }
}

额外建议 #

• 如果调用时只设置了width而未设置height，可以考虑根据图片的原始宽高比自动计算height，避免图片拉伸变形；
• 确认你使用的图片源（e.node.mainPicture.medium）本身有足够的分辨率，如果源图尺寸过小，即使优化缓存逻辑也无法彻底解决模糊问题，可以尝试使用更高分辨率的图片链接（比如large尺寸，如果API提供的话）。

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