9.10 首次打开读缓存

9.10 首次打开读缓存

如果首屏快速展示内容，体验将是一个提升
我们设置下缓存，数据是来自于下拉刷新

img

实现步骤：

第 1 步：定义缓存常量

lib/common/values/constants.dart

1
2
3
4
5
// 首页离线
static const storageHomeBanner = 'home_banner';
static const storageHomeCategories = 'home_categories';
static const storageHomeFlashSell = 'home_flash_sell';
static const storageHomeNewSell = 'home_new_sell';

第 2 步：本地离线 json 数据格式

lib/common/utils/storage.dart

1
2
3
4
5
6
7
/// kv离线存储
class Storage {
  ...

  Future<bool> setJson(String key, Object value) async {
    return await _prefs.setString(key, jsonEncode(value));
  }

第 3 步：控制器 - 保存数据缓存

lib/pages/goods/home/controller.dart

1
2
3
4
5
6
7
8
_initData() async {
  ...

  // 保存离线数据
  Storage().setJson(Constants.storageHomeBanner, bannerItems);
  Storage().setJson(Constants.storageHomeCategories, categoryItems);
  Storage().setJson(Constants.storageHomeFlashSell, flashShellProductList);
  Storage().setJson(Constants.storageHomeNewSell, newProductProductList);

第 4 步：控制器 - 载入缓存

lib/pages/goods/home/controller.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// 读取缓存
Future<void> _loadCacheData() async {
  var stringBanner = Storage().getString(Constants.storageHomeBanner);
  var stringCategories = Storage().getString(Constants.storageHomeCategories);
  var stringFlashSell = Storage().getString(Constants.storageHomeFlashSell);
  var stringNewSell = Storage().getString(Constants.storageHomeNewSell);

  bannerItems = stringBanner != ""
      ? jsonDecode(stringBanner).map<KeyValueModel>((item) {
          return KeyValueModel.fromJson(item);
        }).toList()
      : [];

  categoryItems = stringCategories != ""
      ? jsonDecode(stringCategories).map<CategoryModel>((item) {
          return CategoryModel.fromJson(item);
        }).toList()
      : [];

  flashShellProductList = stringFlashSell != ""
      ? jsonDecode(stringFlashSell).map<ProductModel>((item) {
          return ProductModel.fromJson(item);
        }).toList()
      : [];

  newProductProductList = stringNewSell != ""
      ? jsonDecode(stringNewSell).map<ProductModel>((item) {
          return ProductModel.fromJson(item);
        }).toList()
      : [];

  if (bannerItems.isNotEmpty ||
      categoryItems.isNotEmpty ||
      flashShellProductList.isNotEmpty ||
      newProductProductList.isNotEmpty) {
    update(["home"]);
  }
}
1
2
3
4
5
@override
void onInit() {
  super.onInit();
  _loadCacheData();
}

onInit 先于 onReady 执行, 我们就放这里了

提交代码到 git