移动端对大批量图片加载的优化方法（三）Flutter
本篇主要从Flutter开发中可以使用到的对大批量图片加载的优化方法进行整理。
1.合适的图片格式
详情请参考移动端对大批量图片加载的优化方法（一）。
2.缓存机制
在Flutter中，处理大批量图片加载的缓存机制主要是依赖于第三方库和Flutter自身的架构；
a.缓存库
Glide和CacheableImage等可以自动处理图片的缓存和加载，使你能够更专注于应用的其他部分。
Future<void> _cacheImage() async { // 指定要缓存的图片URL或路径 String imageUrl = 'https://example.com/image.jpg'; // 使用Glide加载图片并缓存到磁盘中 await Glide.with(context) .load(imageUrl) .into(Image.network(imageUrl)); // 将图片设置到Image widget中 }
Future<void> _cacheImage() async { // 指定要缓存的图片URL或路径 String imageUrl = 'https://example.com/image.jpg'; // 使用CacheableImage加载图片并缓存到磁盘中 await CacheableImage.network(imageUrl).cache(); // 缓存图片到磁盘中 }
b.自定义缓存策略
不能使用第三方库，或者需要更精细的控制，可以创建一个自定义的缓存策略；
可以使用一个持久化的存储（如SQLite或SharedPreferences）来存储已经加载过的图片，并在需要时从缓存中检索它们；
Future<void> _cacheImage() async { // 指定要缓存的图片URL或路径 String imageUrl = 'https://example.com/image.jpg'; // 加载图片并将其转换为字节数组 final response = await http.get(imageUrl); final imageBytes = response.bodyBytes; // 将字节数组写入SharedPreferences中作为二进制数据 SharedPreferences prefs = await SharedPreferences.getInstance(); prefs.setInt('image_length', imageBytes.length); prefs.setInt('image_data', imageBytes.hashCode); // 使用哈希值作为键来存储二进制数据 }
注意：可以但不推荐，SharedPreferences一般存储小量数据。
c.Flutter的缓存机制
Flutter本身提供了一些机制来管理资源，包括图片;
可以使用Flutter的AssetBundle API来控制图片的加载和缓存;
这个API允许从资源文件中加载图片，并可以在应用重启后保持这些图片的持久化。
Future<Image> loadImageFromAssetBundle() async { final AssetBundle bundle = await AssetBundle.fromBundle(context); final Uint8List imageBytes = await bundle.loadBytes('assets/image.jpg'); final Image image = Image.memory(imageBytes); return image; }
3.异步加载
处理大量图片的异步加载是一个重要的任务，因为图片加载可能会阻塞UI线程，导致应用界面的卡顿；
a.FutureBuilder
FutureBuilder是一个构建器，用于处理Future。
FutureBuilder<List<dynamic>>( future: fetchImages(), // 假设fetchImages是一个返回Future<List<dynamic>>的函数 builder: (BuildContext context, AsyncSnapshot<List<dynamic>> snapshot) { if (snapshot.connectionState == ConnectionState.waiting) { return CircularProgressIndicator(); // 加载中的UI } else if (snapshot.hasError) { return Text('Error: ${snapshot.error}'); } else { return ListView(children: snapshot.data.map((image) => Image.network(image)).toList()); } },
);
b.异步函数
使用async和await关键字来编写异步函数，并在函数内部执行图片加载操作。
Future<void> loadImages() async { List<dynamic> images = await fetchImages(); // 假设fetchImages是一个返回Future<List<dynamic>>的函数 // 处理加载完成的图片列表
}
c.comet_engine
使用Comet引擎库来异步加载图片。
Future<Image> loadImage() async { String imageUrl = 'https://example.com/image.jpg'; // 替换为你要加载的图片URL CometTask task = _engine.getTask(CometRequestType.networkImage, imageUrl); // 创建网络图片请求任务 await task.waitForFinish(); // 等待任务完成并获取图片数据 return Image.memory(task.result.bodyBytes, imageUrl); // 创建Image对象并返回 }
4.懒加载
对于列表或滚动视图中的图片，可以使用懒加载技术，只在需要显示时才加载图片。
ListView( itemCount: imageUrls.length, itemBuilder: (context, index) { return Visibility( visible: imageLoaded[index], // 假设imageLoaded是一个bool类型的列表，用于记录图片是否已加载完成 child: Image.network(imageUrls[index]), // 加载图片的URL或路径 onLoaded: () { // 图片加载完成后的回调函数 setState(() { // 更新UI状态时需要调用setState函数，确保UI的重新构建和更新 imageLoaded[index] = true; // 将对应图片的状态设置为已加载完成 }); }, ); }
5.控制图片大小
根据需要显示的大小加载图片，避免加载过大的图片。
Image( image: AssetImage('assets/images/my_image.jpg'), // 加载图片资源 fit: BoxFit.cover, // 控制图片大小的方式，这里使用cover方式，即保持图片的纵横比并填充整个约束器
)
6.优化内存管理
a.清理不再需要的图片
当图片不再需要时，及时清理它们以释放内存；
可以在图片不再可见时销毁对应的组件或使用Flutter的垃圾回收机制来清理不再使用的对象；
Image image = Image.network('https://example.com/image.jpg');
// ... 显示图片 ...
// 当图片不再需要时
image.dispose();
// 清除所有缓存的图片
ImageCache.clear();
或者使用Offstage或Visibility来控制图片的显示，当图片不再需要显示时，可以将其移到Offstage或隐藏起来；
这不会立即释放资源，但可以避免在不需要时显示不必要的图片；
当用户导航离开某个页面时，可能需要清理该页面加载的图片资源。
b.使用低质量预览图
在加载高质量图片之前，可以先显示一个低质量的预览图;
可以快速看到图片的大致内容，同时避免了长时间的等待和内存占用；
以下是使用image_utils生成预览图的示例：
// 加载原始图片 Uint8List imageBytes = ...; // 获取图片的字节数据 Image originalImage = Image.fromBytes(imageBytes); // 降低图像质量 int quality = 50; // 设置质量等级，范围为0-100 Image lowQualityImage = originalImage.scale(quality);
c.限制同时加载的图片数量
限制同时加载的图片数量，例如使用队列或优先级队列来管理图片的加载顺序。
class ImageLoader { Queue<Future<void>> _queue = Queue<Future<void>>(); int _maxSimultaneousLoads = 3; // 设置并发加载的最大数量 Future<void> loadImage(String url) async { if (_queue.length < _maxSimultaneousLoads) { _queue.add(loadImageInternal(url)); } else { // 等待当前队列中的图片加载完成后再加载新图片 await Future.wait(_queue); _queue.add(loadImageInternal(url)); } } Future<void> loadImageInternal(String url) async { // 加载图片的逻辑... // 假设这里使用Image.network加载图片 await Image.network(url); }
}
7.预加载
在用户请求图片之前预先加载它们，从而提高图片加载速度和响应性。
class PreloadedImage extends StatefulWidget { final String imageUrl; final int fetchDelay; // 延迟时间（毫秒） final bool useCache; // 是否使用缓存 PreloadedImage({required this.imageUrl, this.fetchDelay = 500, this.useCache = true}); @override _PreloadedImageState createState() => _PreloadedImageState();
} class _PreloadedImageState extends State<PreloadedImage> { late Future<Uint8List> _futureImage; late Image _imageWidget; @override void initState() { super.initState(); _futureImage = Future<Uint8List>.delayed(Duration(milliseconds: widget.fetchDelay), () async { return await http.get(widget.imageUrl).then((response) => response.bodyBytes); }); } @override Widget build(BuildContext context) { if (_futureImage != null && !_futureImage.done) { return CircularProgressIndicator(); // 显示加载指示器 } else if (_futureImage == null) { return Text('Image not loaded'); // 初始状态 } else { final Uint8List imageBytes = _futureImage.result; final ImageProvider imageProvider = Image.memory(imageBytes); _imageWidget = Image(image: imageProvider,); // 使用图片数据构建图像Widget return _imageWidget; // 显示图像Widget } }
}
8.合适的View类型
ListView：当有大量可滚动的内容，并且每个项都是一个图片时，使用ListView是最佳选择；
它可以有效地重用子项，减少内存占用，并且可以水平或垂直滚动。
GridView：如果需要显示一个网格布局的图片，并且图片数量是动态的，可以使用GridView；
每个格子中可以放置一个小图片或缩略图。
Stack & Positioned：当需要动态创建大量浮动的图片层时，可以使用Stack和Positioned；
每个Positioned都可以放置一个图片，并且可以设置不同的位置和大小。
Image Widgets：直接使用Image小部件来显示单张大图或一组小图；
对于单张大图，可以使用Image.network或Image.asset来加载；
对于一组小图，可以使用ListView.builder结合Image.network或Image.asset来构建。
Cached Image：使用第三方库如cached_network_image来缓存网络图片，提高加载速度和性能；
这个库提供了预加载和缓存机制，非常适合加载大量图片。
FittedBox or Container with Fit.xxx：当需要精确控制图片的尺寸或者进行一些自定义布局时，可以使用FittedBox或Container的fit属性；
这样可以确保图片不会超出预期尺寸，从而优化内存使用。
9.优化网络请求
详情请参考移动端对大批量图片加载的优化方法（二）。
