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

发布时间:2024年01月09日

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

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

文章来源:https://blog.csdn.net/weixin_42979360/article/details/135476783
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。