Flutter本地缓存管理插件king_cache的使用

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

Flutter本地缓存管理插件king_cache的使用

简介

king_cache 是一个用于缓存API结果的Flutter插件。通过缓存API结果,当您再次调用相同的API时,它将返回缓存的结果而不是重新发起API请求。这有助于减少API调用次数并提升应用的用户体验。该插件基于文件系统进行缓存,并提供了多种功能来管理缓存,如设置缓存过期时间、记录日志、清除缓存等。

主要特性

  • 缓存API结果:可以缓存API的响应数据。
  • 设置缓存过期时间:可以为缓存设置过期时间,确保数据的新鲜度。
  • 管理缓存:提供添加、删除、清除缓存的功能。
  • 记录日志:可以记录缓存操作的日志,方便调试和追踪。
  • 清除日志:可以清除所有日志。
  • 分享日志:可以将日志分享给其他应用或设备。

Screenshot 1

快速开始

1. 添加依赖

pubspec.yaml 文件中添加 king_cache 依赖:

dependencies:
  king_cache: ^latest_version
2. 导入包

在 Dart 文件中导入 king_cache 包:

import 'package:king_cache/king_cache.dart';
3. 使用插件

以下是一个完整的示例代码,展示了如何使用 king_cache 插件进行缓存管理和日志记录。

完整示例代码

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) => const MaterialApp(
        title: 'King Cache Example',
        home: MyHomePage(title: 'King Cache Example'),
      );
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  void initState() {
    super.initState();
    // 设置API的基础URL
    KingCache.setBaseUrl('https://jsonplaceholder.typicode.com/');
    // 设置请求头
    KingCache.setHeaders({'Content-Type': 'application/json'});
    // 添加表单数据(可选)
    KingCache.appendFormData({'token': '1234567890'});
  }

  [@override](/user/override)
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(title: Text(widget.title)),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // 调用API并缓存结果
              TextButton(
                onPressed: () async {
                  await KingCache().storeLog('Call Json Place Holder API');
                  await KingCache.cacheViaRest(
                    'todos/1', // API路径
                    method: HttpMethod.get, // 请求方法
                    onSuccess: (data) {
                      // 成功回调
                      debugPrint(data);
                      KingCache.storeLog('Response: $data');
                    },
                    onError: (data) => debugPrint('On Error: ${data.message}'), // 错误回调
                    apiResponse: (data) => debugPrint('Api Response: ${data.message}'), // API响应回调
                    isCacheHit: (isHit) => debugPrint('Is Cache Hit: $isHit'), // 是否命中缓存
                    shouldUpdate: false, // 是否强制更新缓存
                    expiryTime: DateTime.now().add(const Duration(hours: 1)), // 缓存过期时间
                  );
                },
                child: const Text('Json Place Holder API'),
              ),
              // 获取日志
              TextButton(
                onPressed: () async {
                  final logs = await KingCache().getLogs;
                  debugPrint(logs);
                },
                child: const Text('Get Logs'),
              ),
              // 清除日志
              TextButton(
                onPressed: () => KingCache().clearLog(),
                child: const Text('Clear Logs'),
              ),
              // 清除所有缓存
              TextButton(
                onPressed: () => KingCache().clearAllCache(),
                child: const Text('Clear All Cache'),
              ),
              // 分享日志
              TextButton(
                onPressed: () => KingCache().shareLogs(),
                child: const Text('Share Logs'),
              ),
            ],
          ),
        ),
      );
}

更多关于Flutter本地缓存管理插件king_cache的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter本地缓存管理插件king_cache的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter项目中,使用king_cache插件可以有效地管理本地缓存。以下是一个简单的代码示例,展示了如何使用king_cache进行本地缓存的存储和检索。

首先,确保你已经在pubspec.yaml文件中添加了king_cache依赖:

dependencies:
  flutter:
    sdk: flutter
  king_cache: ^x.y.z  # 请替换为最新版本号

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

接下来,是一个使用king_cache的简单示例:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter KingCache Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('KingCache Demo'),
        ),
        body: Center(
          child: KingCacheDemo(),
        ),
      ),
    );
  }
}

class KingCacheDemo extends StatefulWidget {
  @override
  _KingCacheDemoState createState() => _KingCacheDemoState();
}

class _KingCacheDemoState extends State<KingCacheDemo> {
  String? cachedValue;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton(
          onPressed: () async {
            // 存储数据到缓存
            await KingCache.set<String>('my_key', 'Hello, KingCache!');
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Data cached successfully!')),
            );
          },
          child: Text('Cache Data'),
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () async {
            // 从缓存中检索数据
            cachedValue = await KingCache.get<String>('my_key');
            setState(() {});
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Data retrieved from cache!')),
            );
          },
          child: Text('Retrieve Data'),
        ),
        SizedBox(height: 20),
        if (cachedValue != null)
          Text(
            'Cached Value: $cachedValue',
            style: TextStyle(fontSize: 20),
          ),
      ],
    );
  }
}

在这个示例中,我们创建了一个简单的Flutter应用,其中包含了两个按钮:一个用于将数据存储到本地缓存,另一个用于从本地缓存中检索数据。

  1. 存储数据:点击“Cache Data”按钮时,调用KingCache.set<String>('my_key', 'Hello, KingCache!')方法将数据存储到本地缓存中。

  2. 检索数据:点击“Retrieve Data”按钮时,调用KingCache.get<String>('my_key')方法从本地缓存中检索数据,并将其显示在屏幕上。

这个示例展示了king_cache插件的基本用法,但king_cache还支持更多高级功能,如设置缓存过期时间、批量存储和检索等。你可以根据项目的具体需求参考king_cache的官方文档进行更深入的使用。

回到顶部