Flutter数据缓存插件cache_service的使用

Cache Service简介

Cache Service 是一个强大的Flutter包，旨在简化和优化应用程序中图片和PDF的缓存与显示。通过其强大的缓存策略，包括内存缓存管理和可定制设置，Cache Service有助于减少加载时间、网络请求和资源使用，从而提供无缝的用户体验。

功能特性

• CachedImage Widget：带有内置缓存机制的图片显示组件，用于减少加载时间和网络请求。
• CachedPDF Widget：支持缓存的PDF文件显示组件，确保快速加载和离线访问。
• 内存缓存：高效地在RAM中存储资产以实现快速访问和减少加载时间。
• 可定制缓存设置：轻松配置缓存大小、过期策略等以满足应用需求。
• Shimmer效果支持：在加载资产时提供Shimmer效果，提升用户体验。

安装步骤

将以下内容添加到您的pubspec.yaml文件中：

dependencies:
  cache_service: 1.0.1

然后运行以下命令来安装依赖项：

flutter pub get

使用方法

初始化CacheService

在main.dart中初始化CacheService：

void main() async {
  WidgetsFlutterBinding.ensureInitialized(); // 确保Flutter已初始化
  final cacheService = CacheService();
  await cacheService.initialize();
  runApp(MyApp());
}

您还可以自定义缓存设置，例如缓存大小、过期策略等：

void main() async {
  WidgetsFlutterBinding.ensureInitialized(); // 确保Flutter已初始化
  final cacheService = CacheService();
  await cacheService.initialize(
      cacheConfig: CacheConfig(
    cleanupPeriod: const Duration(days: 10),
    maxAge: const Duration(days: 14),
    maxFileSizeBytes: 1024 * 1024 * 10, // 指示10 MB
    maxCacheSizeBytes: 1024 * 1024 * 50, // 指示50 MB
    maxRetries: 3,
  ));
  runApp(MyApp());
}

CachedImage Widget

使用CachedImage组件可以轻松地从互联网上加载并缓存图片：

import 'package:cache_service/cache_service.dart';

CachedImage(
  imageUrl: 'https://example.com/image.jpg',
  shimmer: true, // 启用Shimmer效果
  shimmerBaseColor: Colors.black12, // Shimmer基础颜色
  shimmerHighlightColor: Colors.black38, // Shimmer高亮颜色
  alignment: Alignment.center, // 图片对齐方式
  fit: BoxFit.contain, // 图片适配方式
);

CachedPDF Widget

使用CachedPDF组件可以轻松地加载并缓存PDF文件：

import 'package:cache_service/cache_service.dart';

CachedPDF(
  pdfUrl: 'https://example.com/sample.pdf',
  alignment: Alignment.center,
  fit: BoxFit.contain,
);

清除缓存

可以通过调用clearCache()方法清除所有本地缓存（不包括内存缓存）：

InkWell(
  onTap: () {
    CacheService().clearCache();
  },
  child: const Text('Clear cache'),
);

预加载缓存

可以使用preloadImageResources()方法预加载将在稍后使用的图片，以提高用户体验：

InkWell(
  onTap: () {
    CacheService().preloadImageResources(['url1', 'url2']);
  },
  child: const Text('Preload cache'),
);

内存缓存管理

添加项目

CacheService().addItem({'id': 'item1', 'data': 'some data'});

获取项目

Map<String, dynamic>? item = CacheService().getItem('item1');

检查项目是否存在

bool exists = CacheService().containsItem('item1');

更新项目

CacheService().updateItem({'id': 'item1', 'data': 'updated data'});

移除项目

bool removed = CacheService().removeItemFromMemory('item1');

清除内存缓存

CacheService().clearCacheFromMemory();

获取所有缓存项目

List<Map<String, dynamic>> allItems = CacheService().memoryCache;

示例代码

以下是一个完整的示例代码，展示了如何在实际场景中使用CacheService：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized(); // 确保Flutter已初始化
  final cacheService = CacheService();
  await cacheService.initialize();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple Cache App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(
            'CacheService Initialized!',
            style: TextStyle(fontSize: 24),
          ),
          // 缓存图片
          CachedImage(
            imageUrl: 'https://sample.com/image.png', // 需要缓存的图片URL
            shimmer: true, // 启用Shimmer效果
            shimmerBaseColor: Colors.black12, // Shimmer基础颜色
            shimmerHighlightColor: Colors.black38, // Shimmer高亮颜色
            alignment: Alignment.center, // 图片对齐方式
            fit: BoxFit.contain, // 图片适配方式
          ),
          SizedBox(height: 10),
          CachedPDF(
            pdfUrl: 'https://sample.com/sample.pdf',
            alignment: Alignment.center,
            fit: BoxFit.contain,
          ),
          SizedBox(height: 10),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  // 清除缓存
                  CacheService().clearCache();
                },
                child: Text('Clear cache'),
              ),
              ElevatedButton(
                onPressed: () {
                  // 预加载缓存
                  CacheService().preloadImageResources(['url1', 'url2']);
                },
                child: Text('Preload cache'),
              ),
            ],
          ),
          // 内存缓存管理
          ElevatedButton(
            onPressed: () {
              CacheService().addItem({'id': 'item1', 'data': 'some data'});
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Item added to cache')),
              );
            },
            child: Text('Add Item'),
          ),
          SizedBox(height: 10),
          ElevatedButton(
            onPressed: () {
              Map<String, dynamic>? item = CacheService().getItem('item1');
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Item: ${item.toString()}')),
              );
            },
            child: Text('Get Item'),
          ),
          SizedBox(height: 10),
          ElevatedButton(
            onPressed: () {
              bool exists = CacheService().containsItem('item1');
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Item exists: $exists')),
              );
            },
            child: Text('Check Item Exists'),
          ),
          SizedBox(height: 10),
          ElevatedButton(
            onPressed: () {
              CacheService().updateItem({'id': 'item1', 'data': 'updated data'});
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Item updated in cache')),
              );
            },
            child: Text('Update Item'),
          ),
          SizedBox(height: 10),
          ElevatedButton(
            onPressed: () {
              bool removed = CacheService().removeItemFromMemory('item1');
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Item removed: $removed')),
              );
            },
            child: Text('Remove Item'),
          ),
          SizedBox(height: 10),
          ElevatedButton(
            onPressed: () {
              CacheService().clearCacheFromMemory();
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Cache cleared')),
              );
            },
            child: Text('Clear Cache From Memory'),
          ),
          SizedBox(height: 10),
          ElevatedButton(
            onPressed: () {
              List<Map<String, dynamic>> allItems = CacheService().memoryCache;
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('All Cached Items: $allItems')),
              );
            },
            child: Text('Show All Cached Items'),
          ),
        ],
      ),
    );
  }
}

这个示例代码展示了如何初始化CacheService，使用CachedImage和CachedPDF组件加载和缓存图片及PDF文件，以及如何进行内存缓存的管理操作。希望这些信息能帮助您更好地理解和使用cache_service插件。