Flutter异步数据缓存与构建插件cached_future_builder的使用

Flutter异步数据缓存与构建插件cached_future_builder的使用

cached_future_builder

cached_future_builder 是一个为简化异步数据获取管理而设计的 Flutter 包。它通过内置缓存功能来提供数据缓存功能。这个包允许你缓存从 Future 中获取的数据，并在以后访问它，显著提高应用程序性能并增强用户体验，特别是在网络请求中。

主要特性：

• 自动缓存：cached_future_builder 自动缓存从 Future 获取的结果。这意味着当再次请求相同的数据时，可以从缓存中获取数据，从而提供更快的响应时间和减少重复的网络调用。

• 自定义缓存持续时间：用户可以指定缓存数据的有效期。此功能使您可以控制缓存的生命周期，确保可以在必要时刷新数据，同时仍能从缓存响应中受益。

• 强制刷新：该包提供了一种在需要时强制刷新缓存数据的方法。这对于需要确保用户访问最新信息的场景特别有用，允许您绕过缓存并直接从网络获取新数据。

• 模型序列化：该包支持通过 fromJson 和 toJson 方法进行数据的序列化和反序列化。这使得您可以无缝地处理自己的数据模型，并有效管理应用程序中的数据流。

使用场景：

• 社交媒体应用：你可以利用缓存功能快速显示用户资料、帖子或评论，从而提升整体用户体验。

• 电子商务应用：该包非常适合缓存产品详情、用户评论或促销优惠，以实现更快的加载时间和改进的响应能力。

• 天气应用：频繁更新的天气数据可以从该包中获益，确保用户高效地接收最新信息。

cached_future_builder 是现代 Flutter 应用程序中增强性能和用户体验的有效数据缓存工具。如果你正在寻找一个可靠且灵活的解决方案，建议将此包集成到你的项目中。

安装

1. 在 pubspec.yaml 文件中添加依赖项：

dependencies:
    cached_future_builder: ^1.0.5

1. 运行 flutter pub get 命令来安装该包。

2. 在 main.dart 文件中初始化缓存系统（可选）：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // 如果想要加快缓存系统的加载速度，则运行此行代码
  // await CacheManager().initCache();

  runApp(const MyApp());
}

使用方法

定义模型

创建一个继承自 BaseModel 并实现 fromJson 和 toJson 方法的模型类：

class MyModel extends BaseModel {
  final String name;
  final int age;

  MyModel({required this.name, required this.age});

  @override
  Map<String, dynamic> toJson() {
    return {
      'name': name,
      'age': age,
    };
  }

  @override
  MyModel fromJson(Map<String, dynamic> json) {
    return MyModel(
      name: json['name'],
      age: json['age'],
    );
  }
}

使用 CachedFutureWidget 缓存数据

将你的数据获取逻辑包装在 CachedFutureWidget 中，提供获取函数、缓存键、模型和构建器：

import 'package:flutter/material.dart';
import 'package:cached_future_builder/src/cached_future_widget.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('缓存未来示例')),
        body: CachedFutureWidget<MyModel>(
          fetchFunction: () async {
            // 模拟带有延迟的网络请求
            await Future.delayed(Duration(seconds: 2));
            return MyModel(name: 'John Doe', age: 30);
          },
          cacheKey: 'my_model_data',
          model: MyModel(name: '', age: 0), // 默认/空模型实例
          cacheDuration: Duration(minutes: 10), // 可选缓存有效期
          forceRefresh: false, // 设置为true以强制刷新并绕过缓存
          builder: (context, data) {
            return Center(
              child: Text('姓名: ${data.name}, 年龄: ${data.age}'),
            );
          },
        ),
      ),
    );
  }
}

CacheManager

CacheManager 处理所有缓存操作。如果需要，还可以手动与缓存进行交互：

final CacheManager cacheManager = CacheManager();
await cacheManager.initCache();

// 保存数据
await cacheManager.saveData('key', MyModel(name: 'John Doe', age: 30));

// 检索数据
MyModel? model = cacheManager.getData('key', MyModel(name: '', age: 0));

// 删除数据
await cacheManager.deleteData('key');

参数说明

• fetchFunction：异步函数，用于获取数据。
• cacheKey：唯一字符串，用于存储和检索缓存数据。
• model：默认模型实例，用于反序列化缓存数据。
• cacheDuration：（可选）缓存有效期。如果不提供，则认为缓存一直有效。
• forceRefresh：（可选）如果为 true，则忽略缓存并获取新数据。默认值为 false。
• builder：一个接受获取或缓存数据的构建器函数，返回一个 Widget。

示例

CachedFutureWidget<MyModel>(
  fetchFunction: () async {
    await Future.delayed(Duration(seconds: 2));
    return MyModel(name: 'John Doe', age: 30);
  },
  cacheKey: 'my_model_data',
  model: MyModel(name: '', age: 0),
  cacheDuration: Duration(minutes: 10),
  forceRefresh: false,
  builder: (context, data) {
    return Text('姓名: ${data.name}, 年龄: ${data.age}');
  },
)

测试

要运行测试：

flutter test