Flutter图片加载与缓存教程

Flutter图片加载与缓存教程

3 回复

推荐使用flutter_cache_manager库，简单易用，轻松实现图片加载与缓存。

更多关于Flutter图片加载与缓存教程的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


推荐使用flutter_cache_manager插件，简单易用，先下载再缓存图片，还能设置过期时间。

在Flutter中，图片加载与缓存是开发中常见的需求。Flutter提供了Image组件来加载图片，并且可以通过cached_network_image插件来实现网络图片的缓存。以下是详细的教程：

1. 使用Image组件加载图片

Flutter的Image组件可以加载本地和网络图片。

加载本地图片

Image.asset('assets/images/my_image.png');

确保在pubspec.yaml中正确配置了资源路径：

flutter:
  assets:
    - assets/images/my_image.png

加载网络图片

Image.network('https://example.com/my_image.jpg');

2. 使用cached_network_image插件缓存网络图片

cached_network_image插件可以帮助你缓存网络图片，避免重复下载。

安装插件

在pubspec.yaml中添加依赖：

dependencies:
  cached_network_image: ^3.2.0

然后运行flutter pub get安装插件。

使用CachedNetworkImage

import 'package:cached_network_image/cached_network_image.dart';

CachedNetworkImage(
  imageUrl: 'https://example.com/my_image.jpg',
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
);
  • imageUrl: 图片的URL。
  • placeholder: 图片加载时显示的占位符。
  • errorWidget: 图片加载失败时显示的错误组件。

3. 自定义缓存策略

你可以通过CachedNetworkImageProvider自定义缓存策略：

CachedNetworkImage(
  imageUrl: 'https://example.com/my_image.jpg',
  imageBuilder: (context, imageProvider) => Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: imageProvider,
        fit: BoxFit.cover,
      ),
    ),
  ),
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
);

4. 清除缓存

你可以使用CachedNetworkImage.evictFromCache方法清除缓存：

CachedNetworkImage.evictFromCache('https://example.com/my_image.jpg');

总结

通过Image组件和cached_network_image插件，你可以轻松实现Flutter中的图片加载与缓存。cached_network_image插件特别适合处理网络图片的缓存，提升应用性能。

回到顶部