当前位置：首页 > news >正文

网络图片的缓存和压缩

news 来源：原创 2025/5/23 4:59:49

为了结合使用 CachedNetworkImage 和 flutter_image_compress 插件，实现对网络图片的缓存和压缩，避免重复加载和减少内存占用，可以按照以下步骤进行：

1. 添加依赖

确保在 pubspec.yaml 文件中添加了以下依赖：

dependencies:flutter:sdk: fluttercached_network_image: ^3.3.0flutter_image_compress: ^1.2.0

运行以下命令以安装依赖：

flutter pub get

2. 创建自定义图片组件

创建一个自定义图片组件，结合 CachedNetworkImage 和 flutter_image_compress 插件：

import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter_image_compress/flutter_image_compress.dart';class OptimizedCachedNetworkImage extends StatelessWidget {final String imageUrl;final int quality;final int minWidth;final int minHeight;const OptimizedCachedNetworkImage({Key? key,required this.imageUrl,this.quality = 80,this.minWidth = 1024,this.minHeight = 1024,}) : super(key: key);Future<Uint8List?> _compressImage(Uint8List imageBytes) async {try {List<int>? compressedBytes = await FlutterImageCompress.compressWithList(imageBytes,quality: quality,autoCorrectionAngle: true,minWidth: minWidth,minHeight: minHeight,);return compressedBytes != null ? Uint8List.fromList(compressedBytes) : null;} catch (e) {print("图片压缩失败：$e");return null;}}@overrideWidget build(BuildContext context) {return CachedNetworkImage(imageUrl: imageUrl,imageBuilder: (context, imageProvider) {return FutureBuilder<Uint8List?>(future: _compressImage(imageProvider.resolve(ImageConfiguration()).toString()),builder: (context, snapshot) {if (snapshot.connectionState == ConnectionState.waiting) {return const CircularProgressIndicator();} else if (snapshot.hasError || snapshot.data == null) {return const Icon(Icons.error);}return Image.memory(snapshot.data!,fit: BoxFit.cover,);},);},placeholder: (context, url) => const CircularProgressIndicator(),errorWidget: (context, url, error) => const Icon(Icons.error),);}
}

3. 使用示例

在需要显示图片的地方使用上面创建的组件：

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: const Text('优化的网络图片加载'),),body: Center(child: OptimizedCachedNetworkImage(imageUrl: 'https://example.com/image.jpg',quality: 80,minWidth: 800,minHeight: 600,),),),);}
}

关键点说明

使用 CachedNetworkImage：确保图片被缓存，避免重复的网络请求和解码。
使用 flutter_image_compress：对下载的图片进行压缩，减少内存占用和提升显示效率。
结合两者的优势：通过 CachedNetworkImage 避免重复加载，通过 flutter_image_compress 减少内存占用，提高应用性能。