5.5 图片与资源管理

图片加载和资源管理是 Flutter 应用的基础能力。高效的图片加载策略、缓存机制和 Asset 管理直接影响 App 的性能和用户体验。

一、Asset 资源管理

1.1 注册与加载

# pubspec.yamlflutter:assets:-assets/images/# 整个目录-assets/icons/-assets/animations/-assets/images/logo.png# 单个文件

// 加载图片资源Image.asset('assets/images/logo.png')// 加载不同分辨率（自动适配）// assets/images/logo.png → 1x// assets/images/2.0x/logo.png → 2x// assets/images/3.0x/logo.png → 3xImage.asset('assets/images/logo.png',width:200,height:200,fit:BoxFit.contain,)// 加载 JSON / 文本文件finaljsonStr=awaitrootBundle.loadString('assets/config.json');finalconfig=jsonDecode(jsonStr);// 加载字节数据finaldata=awaitrootBundle.load('assets/data.bin');

1.2 动态加载 Asset

// 根据条件加载不同图片Image.asset(isDarkMode?'assets/images/logo_dark.png':'assets/images/logo_light.png',)// 平台特定资源Image.asset(Platform.isIOS?'assets/images/icon_ios.png':'assets/images/icon_android.png',)

二、网络图片加载

2.1 Image.network

Image.network('https://example.com/photo.jpg',width:300,height:200,fit:BoxFit.cover,// 加载中占位loadingBuilder:(context,child,progress){if(progress==null)returnchild;returnCenter(child:CircularProgressIndicator(value:progress.expectedTotalBytes!=null?progress.cumulativeBytesLoaded/progress.expectedTotalBytes!:null,),);},// 加载失败占位errorBuilder:(context,error,stackTrace){returnContainer(color:Colors.grey[200],child:constIcon(Icons.broken_image,size:48,color:Colors.grey),);},// ⭐ 限制解码尺寸（节省内存）cacheWidth:600,cacheHeight:400,)

2.2 CachedNetworkImage（推荐）

dependencies:cached_network_image:^3.3.1

CachedNetworkImage(imageUrl:product.imageUrl,width:200,height:200,fit:BoxFit.cover,// 加载中：骨架屏placeholder:(context,url)=>Shimmer.fromColors(baseColor:Colors.grey[300]!,highlightColor:Colors.grey[100]!,child:Container(color:Colors.white,width:200,height:200),),// 加载失败errorWidget:(context,url,error)=>Container(color:Colors.grey[200],child:constIcon(Icons.error_outline),),// 控制缓存memCacheWidth:400,// 内存缓存宽度maxWidthDiskCache:800,// 磁盘缓存最大宽度fadeInDuration:constDuration(milliseconds:300),)

2.3 FadeInImage（淡入过渡）

FadeInImage.assetNetwork(placeholder:'assets/images/placeholder.png',// 本地占位图image:product.imageUrl,// 网络图片fit:BoxFit.cover,fadeInDuration:constDuration(milliseconds:200),imageErrorBuilder:(context,error,stackTrace){returnImage.asset('assets/images/no_image.png');},)

三、SVG 与矢量图

dependencies:flutter_svg:^2.0.10

import'package:flutter_svg/flutter_svg.dart';// 加载 Asset SVGSvgPicture.asset('assets/icons/cart.svg',width:24,height:24,colorFilter:ColorFilter.mode(Colors.blue,BlendMode.srcIn),// 着色)// 加载网络 SVGSvgPicture.network('https://example.com/icon.svg',width:32,height:32,)// SVG 字符串SvgPicture.string(''' <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <circle cx="12" cy="12" r="10" fill="currentColor"/> </svg> ''')

四、图片缓存管理

4.1 内存缓存配置

voidmain(){PaintingBinding.instance.imageCache..maximumSize=200// 最多缓存 200 张图片..maximumSizeBytes=100<<20;// 最大 100MBrunApp(constMyApp());}// 获取缓存状态finalcache=PaintingBinding.instance.imageCache;debugPrint('缓存数量:${cache.currentSize}/${cache.maximumSize}');debugPrint('缓存大小:${cache.currentSizeBytes~/1024~/1024}MB');

4.2 清理缓存

// 清理所有图片缓存imageCache.clear();imageCache.clearLiveImages();// 清理 CachedNetworkImage 磁盘缓存import'package:flutter_cache_manager/flutter_cache_manager.dart';awaitDefaultCacheManager().emptyCache();// 只驱逐特定图片imageCache.evict(AssetImage('assets/large_image.png'));

4.3 预加载图片

// 在进入页面前预加载（避免闪烁）@overridevoiddidChangeDependencies(){super.didChangeDependencies();precacheImage(constAssetImage('assets/images/banner.png'),context);precacheImage(NetworkImage(product.imageUrl),context);}

五、图片选择与裁剪

dependencies:image_picker:^1.0.7image_cropper:^5.0.1

import'package:image_picker/image_picker.dart';import'package:image_cropper/image_cropper.dart';classImagePickerService{staticfinal_picker=ImagePicker();// 从相册选择staticFuture<File?>pickFromGallery()async{finalxFile=await_picker.pickImage(source:ImageSource.gallery,maxWidth:1080,// 限制最大宽度maxHeight:1080,imageQuality:85,// 压缩质量 0-100);if(xFile==null)returnnull;returnFile(xFile.path);}// 拍照staticFuture<File?>takePhoto()async{finalxFile=await_picker.pickImage(source:ImageSource.camera,preferredCameraDevice:CameraDevice.rear,maxWidth:1080,imageQuality:85,);if(xFile==null)returnnull;returnFile(xFile.path);}// 多选staticFuture<List<File>>pickMultiple({int limit=9})async{finalxFiles=await_picker.pickMultiImage(maxWidth:1080,imageQuality:85,limit:limit,);returnxFiles.map((f)=>File(f.path)).toList();}// 裁剪staticFuture<File?>cropImage(FileimageFile)async{finalcroppedFile=awaitImageCropper().cropImage(sourcePath:imageFile.path,aspectRatio:constCropAspectRatio(ratioX:1,ratioY:1),uiSettings:[AndroidUiSettings(toolbarTitle:'裁剪头像',toolbarColor:Colors.blue,toolbarWidgetColor:Colors.white,cropStyle:CropStyle.circle,),IOSUiSettings(title:'裁剪头像',cropStyle:CropStyle.circle),],);if(croppedFile==null)returnnull;returnFile(croppedFile.path);}}

六、图片压缩

dependencies:flutter_image_compress:^2.1.0

import'package:flutter_image_compress/flutter_image_compress.dart';classImageCompressor{// 压缩到指定质量staticFuture<File>compress(Filefile,{int quality=80})async{finaltargetPath='${file.parent.path}/compressed_${file.uri.pathSegments.last}';finalresult=awaitFlutterImageCompress.compressAndGetFile(file.absolute.path,targetPath,quality:quality,minWidth:1080,minHeight:1080,);returnFile(result!.path);}// 压缩到指定大小（如 200KB）staticFuture<File>compressToSize(Filefile,int maxKB)async{int quality=90;Filecompressed=file;while(quality>10){compressed=awaitcompress(file,quality:quality);finalsizeKB=awaitcompressed.length()~/1024;if(sizeKB<=maxKB)break;quality-=10;}returncompressed;}}

小结

👉 下一节继续阅读后续章节