Flutter图片缓存与释放插件disposable_cached_images的使用

发布于 1周前 作者 bupafengyu 来自 Flutter

Flutter图片缓存与释放插件disposable_cached_images的使用

disposable_cached_images 是一个用于下载、缓存、显示和从内存中释放图片的Flutter插件。以下是该插件的主要特性和使用方法。

特性

  • 从互联网或本地文件（资产和设备存储）显示图片。
  • 在缓存目录中缓存图片。
  • 如果图片小部件已被销毁，则取消下载以减少带宽使用。
  • 如果图片小部件已被销毁，则从内存中移除图片以减少设备内存使用。
  • 使用 dart:isolate 和 Web-Workers 提高性能。

使用方法

设置

在使用此插件之前，需要初始化缓存，并将根小部件包装在 DisposableImages 中。

void main() async {
  await DisposableImages.init();

  runApp(const DisposableImages(MyApp()));
}

对于Web项目，还需要额外的步骤：

  1. 下载 web_js 文件夹并将其复制到你的 web 文件夹中。
  2. 修改 index.html 文件，添加如下脚本引用：
<!doctype html>
<html lang="en">
<head>
  <script src="flutter.js" defer></script>
  <script src="web_js/worker_helper.js" defer></script>
</head>
<body></body>
</html>

初始化选项

  • enableWebCache：启用/禁用Web图片缓存。
  • maximumDecodedImagesCount：设置解码后应保持在内存中的最大图片数量。
  • maximumDecode：设置同时解码的最大图片数量。
  • maximumDownload：设置同时下载的最大图片数量。

显示图片

使用 DisposableCachedImage 的命名构造函数来显示图片。

获取网络图片

DisposableCachedImage.network(imageUrl: 'https://picsum.photos/id/23/200/300');

获取本地资源图片

DisposableCachedImage.asset(imagePath: 'assets/images/a_dot_burr.jpeg');

获取本地存储图片

DisposableCachedImage.local(imagePath: 'assets/images/a_dot_burr.jpeg');

显示动态高度图片

如果使用动态高度图片，应该声明宽度以避免UI跳跃。

DisposableCachedImage.network(
  imageUrl: imageUrl,
  isDynamicHeight: true,
  width: MediaQuery.of(context).size.width * 0.3,
),

自定义加载状态

可以自定义图片加载、下载、错误和准备就绪时显示的小部件。

DisposableCachedImage.network(
  imageUrl: 'https://picsum.photos/id/23/200/300',
  onLoading: (context) => const Center(
    child: Icon(Icons.downloading),
  ),
  progressBuilder: (context, progress) => Center(
    child: LinearProgressIndicator(value: progress),
  ),
  onError: (context, error, stackTrace, retryCall) => Center(
    child: IconButton(
      onPressed: retryCall,
      icon: const Icon(Icons.download),
    ),
  ),
  onImage: (context, imageWidget, height, width) => Stack(
    children: [
      imageWidget,
      MyWidget(),
    ],
  ),
);

调整图片大小

可以通过启用 resizeImage 来调整图片大小，以减少栅格线程使用。

DisposableCachedImage.network(
  imageUrl: imageUrl,
  maxCacheWidth: 300,
  width: 200,
  resizeImage: true,
),

图片裁剪

可以通过提供 BorderRadius 或 BoxShape 来裁剪图片。

// 圆角裁剪
DisposableCachedImage.network(
  imageUrl: imageUrl,
  borderRadius: const BorderRadius.all(Radius.circular(20)),
),

// 椭圆形裁剪
DisposableCachedImage.network(
  imageUrl: imageUrl,
  shape: BoxShape.circle,
),

保持图片存活

默认情况下，每个图片在不再被任何小部件使用时会从内存中移除。可以通过设置 keepAlive 来保持某些图片在整个应用程序生命周期中存在于内存中。

DisposableCachedImage.network(
  imageUrl: imageUrl,
  keepAlive: true,
),

解码图片

可以在显示之前解码图片，以便立即显示而不加载。

// 解码网络图片
DisposableImages.decodedImages.addNetwork(url);

// 解码本地图片
DisposableImages.decodedImages.addLocal(path);

// 解码资源图片
DisposableImages.decodedImages.addAssets(path);

如果以这种方式解码图片，则需要手动释放图片或设置最大解码图片数量。

// 设置最大解码图片数量
DisposableImages.init(maximumDecodedImagesCount: 100);

// 手动释放图片
DisposableImages.decodedImages.dispose(key);

// 释放所有图片
DisposableImages.decodedImages.disposeAll();

清除缓存

可以从设备存储中清除所有缓存图片。

DisposableCachedImage.clearCache();

示例代码

以下是一个完整的示例应用，展示了如何使用 disposable_cached_images 插件。

import 'package:disposable_cached_images/disposable_cached_images.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await DisposableImages.init();

  runApp(const DisposableImages(MyApp()));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: GridView.builder(
          addRepaintBoundaries: false,
          padding: const EdgeInsets.all(20),
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            mainAxisSpacing: 20,
            crossAxisSpacing: 20,
          ),
          itemCount: images.length,
          itemBuilder: (context, index) => DisposableCachedImage.network(imageUrl: images[index]),
        ),
      ),
    );
  }

  static final images = List.generate(
    500,
    (final i) => 'https://picsum.photos/id/$i/200/300',
  );
}

通过以上内容，您可以快速上手 disposable_cached_images 插件，并在您的Flutter项目中实现高效的图片管理和优化。


更多关于Flutter图片缓存与释放插件disposable_cached_images的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter图片缓存与释放插件disposable_cached_images的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用disposable_cached_images插件进行图片缓存与释放的示例代码。disposable_cached_images是一个可以帮助管理图片缓存并在需要时释放缓存的插件。

首先，你需要在pubspec.yaml文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  disposable_cached_images: ^最新版本号  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来，在你的Dart代码中，你可以按照以下步骤使用disposable_cached_images：

  1. 导入包：
import 'package:flutter/material.dart';
import 'package:disposable_cached_images/disposable_cached_images.dart';
  1. 创建图片缓存管理器：
void main() {
  // 创建全局的图片缓存管理器
  final cacheManager = DisposableCacheManager(
    cacheDirectory: 'my_images_cache', // 缓存目录名称
    maxAge: const Duration(days: 7),    // 缓存有效期
  );

  runApp(MyApp(cacheManager: cacheManager));
}
  1. 在应用中使用缓存图片：
class MyApp extends StatelessWidget {
  final DisposableCacheManager cacheManager;

  MyApp({required this.cacheManager});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Disposable Cached Images Example'),
        ),
        body: Center(
          child: CachedImage(
            imageUrl: 'https://example.com/image.jpg',
            cacheManager: cacheManager,
            placeholder: (context, url) => CircularProgressIndicator(),
            errorWidget: (context, url, error) => Icon(Icons.error),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // 释放缓存
            cacheManager.clearCache();
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Cache cleared')),
            );
          },
          tooltip: 'Clear Cache',
          child: Icon(Icons.delete),
        ),
      ),
    );
  }
}

在这个示例中：

  • DisposableCacheManager 被创建并传递给 MyApp。
  • CachedImage 小部件用于显示缓存的图片。如果图片尚未缓存，它会显示一个占位符（在这个例子中是一个 CircularProgressIndicator）。如果加载失败，它会显示一个错误小部件（在这个例子中是一个错误图标）。
  • 一个浮动操作按钮（FAB）用于手动清除缓存。点击按钮后，cacheManager.clearCache() 会被调用，从而释放所有缓存的图片。

请确保你已经替换了 imageUrl 和其他配置以适应你的具体需求。这样，你就可以在你的Flutter应用中使用 disposable_cached_images 插件来管理图片缓存了。

回到顶部