移动端对大批量图片加载的优化方法（三）

移动端对大批量图片加载的优化方法（三）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.优化网络请求

详情请参考移动端对大批量图片加载的优化方法（二）。