Flutter本地缓存同步插件local_cache_sync的使用

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

Flutter本地缓存同步插件local_cache_sync的使用

local_cache_sync 是一个非常简单易用的 Flutter 本地存储库,适用于在本地存储轻量级数据(例如用户保存在本地的设备信息,或者缓存一系列用户信息)。该插件的所有方法都是同步的,而不是异步的。这意味着你不需要使用 await 就可以获取数据,在 Flutter 中,这可以显著减少 StatefulWidget 的数量,大量减少代码的复杂度。

1. 安装与配置

pubspec.yaml 文件中添加以下依赖:

dependencies:
  path_provider: ^1.4.5
  local_cache_sync: ^1.2.1

2. 设置缓存路径

main.dart 文件中设置缓存路径。local_cache_sync 从 1.2.0 版本开始支持自定义缓存路径。你可以根据需要选择临时目录或应用支持目录。

1.2.0 及以上版本:
import 'package:flutter/material.dart';
import 'package:local_cache_sync/local_cache_sync.dart';
import 'package:path_provider/path_provider.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 设置缓存路径为临时目录
  LocalCacheSync.instance.setCachePath(
    await getTemporaryDirectory(),
    'example_app/',
  );
  
  // 也可以为 UserDefaultSync 设置特殊路径
  UserDefaultSync.setCachePath(
    await getApplicationSupportDirectory(),
    'example_app/',
  );
  
  runApp(MyApp());
}
1.1.1 及以下版本:
import 'package:flutter/material.dart';
import 'package:local_cache_sync/local_cache_sync.dart';
import 'package:path_provider/path_provider.dart';

void main() {
  getTemporaryDirectory().then((uri) {
    LocalCacheSync.instance.setCachePath(uri.path);
    runApp(MyApp());
  });
}

3. 使用示例

3.1 用户偏好设置缓存

local_cache_sync 可以轻松实现保存用户自定义设置。所有的保存和读取操作都是同步的,因此无需等待异步操作完成。

保存和读取值
// 保存值
LocalCacheSync.userDefault.setWithKey<bool>('isDarkMode', true);
LocalCacheSync.userDefault.setWithKey<String>('token', 'aabbccdd');
LocalCacheSync.userDefault.setWithKey<Map>('x-config', {'id': 1243});

// 读取值
bool isDarkMode = LocalCacheSync.userDefault.getWithKey<bool>('isDarkMode');
String token = LocalCacheSync.userDefault.getWithKey<String>('token');
Map xConfig = LocalCacheSync.userDefault.getWithKey<Map>('x-config');
使用操作符
// 保存值
LocalCacheSync.userDefault['isDarkMode'] = true;
LocalCacheSync.userDefault['token'] = 'aabbccdd';
LocalCacheSync.userDefault['x-config'] = {'id': 1243};

// 读取值
bool isDarkMode = LocalCacheSync.userDefault['isDarkMode'];
String token = LocalCacheSync.userDefault['token'];
Map xConfig = LocalCacheSync.userDefault['x-config'];
3.2 使用 DefaultValueCache

DefaultValueCache 可以让你通过静态属性轻松使用缓存,并为缓存指定默认值,避免缓存为空的情况。

class MySetting {
  static var autoLogin = const DefaultValueCache<bool>('autoLogin', false);
}

// 保存值
MySetting.autoLogin.value = true;

// 读取值
bool isAutoLogin = MySetting.autoLogin.value;
3.3 列表管理

如果你需要管理一系列值,可以使用 LocalCacheLoader。只需要一个 channel 标志,你就可以管理一系列值。

模型示例
class Device {
  final String uuid;
  final String name;
  final int type;

  Device({
    this.uuid,
    this.name,
    this.type,
  });

  Device.fromJson(Map<String, dynamic> map)
      : this(
          uuid: map['uuid'],
          name: map['name'],
          type: map['type'],
        );

  static LocalCacheLoader get _loader => LocalCacheLoader('device');

  // 获取所有设备
  static List<Device> all() {
    return _loader.all
        .map<Device>(
          (cache) => Device.fromJson(cache.value),
        )
        .toList();
  }

  // 懒加载获取所有设备
  static List<LocalCacheObject> allWithLazyLoad() {
    return _loader.all;
  }

  // 保存设备
  LocalCacheObject save() {
    return Device._loader.saveById(uuid, jsonMap);
  }

  Map<String, dynamic> get jsonMap => {
        'uuid': uuid,
        'name': name,
        'type': type,
      };
}
3.4 快速查看缓存数据

你可以使用 LocalCacheSync.pushDetailPage(context) 快速查看保存的数据。

LocalCacheSync.pushDetailPage(context);

4. 注意事项

  • 不要在IO密集型场景使用 local_cache_sync:例如即时储存每秒10次的扫描结果。虽然在 Flutter 中阻塞主线程不会导致UI卡顿,但你不应在IO密集型场景中使用 local_cache_sync,这超出了其设计的工作范围。

5. 完整示例 Demo

以下是一个完整的示例项目,展示了如何使用 local_cache_sync 来保存和读取用户偏好设置,并在界面上显示这些设置。

import 'package:flutter/material.dart';
import 'package:local_cache_sync/local_cache_sync.dart';
import 'package:path_provider/path_provider.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 设置缓存路径
  LocalCacheSync.instance.setCachePath(
    await getTemporaryDirectory(),
    'example_app/',
  );
  
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool _isDarkMode = false;
  String _token = '';
  Map _xConfig = {};

  [@override](/user/override)
  void initState() {
    super.initState();
    
    // 初始化时读取缓存
    _isDarkMode = LocalCacheSync.userDefault.getWithKey<bool>('isDarkMode') ?? false;
    _token = LocalCacheSync.userDefault.getWithKey<String>('token') ?? '';
    _xConfig = LocalCacheSync.userDefault.getWithKey<Map>('x-config') ?? {};
  }

  void _saveSettings() {
    // 保存设置
    LocalCacheSync.userDefault.setWithKey<bool>('isDarkMode', _isDarkMode);
    LocalCacheSync.userDefault.setWithKey<String>('token', _token);
    LocalCacheSync.userDefault.setWithKey<Map>('x-config', _xConfig);

    // 提示保存成功
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('设置已保存')),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('本地缓存同步示例'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            SwitchListTile(
              title: Text('深色模式'),
              value: _isDarkMode,
              onChanged: (value) {
                setState(() {
                  _isDarkMode = value;
                });
              },
            ),
            TextField(
              decoration: InputDecoration(labelText: 'Token'),
              onChanged: (value) {
                setState(() {
                  _token = value;
                });
              },
              controller: TextEditingController(text: _token),
            ),
            TextField(
              decoration: InputDecoration(labelText: 'X-Config'),
              onChanged: (value) {
                setState(() {
                  _xConfig = {'id': int.tryParse(value)};
                });
              },
              controller: TextEditingController(text: _xConfig['id'].toString()),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _saveSettings,
              child: Text('保存设置'),
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然,以下是如何在Flutter项目中使用local_cache_sync插件的一个简单示例。local_cache_sync插件通常用于本地缓存数据的同步管理,但请注意,实际插件的功能和API可能会根据版本有所不同。因此,以下代码是基于假设的API设计,具体使用时请参考插件的官方文档和源代码。

首先,确保在pubspec.yaml文件中添加local_cache_sync依赖:

dependencies:
  flutter:
    sdk: flutter
  local_cache_sync: ^x.y.z  # 替换为实际版本号

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

接下来,在你的Flutter项目中,你可以按照以下方式使用local_cache_sync插件:

import 'package:flutter/material.dart';
import 'package:local_cache_sync/local_cache_sync.dart';  // 假设插件提供这个import路径

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final LocalCacheSync _cacheSync = LocalCacheSync.instance;
  String? _cachedData;

  @override
  void initState() {
    super.initState();
    // 尝试从本地缓存中获取数据
    _loadDataFromCache();
  }

  Future<void> _loadDataFromCache() async {
    String? cachedData = await _cacheSync.get('myKey');
    if (cachedData != null) {
      setState(() {
        _cachedData = cachedData;
      });
    } else {
      // 如果没有缓存数据,则模拟从网络获取数据并同步到本地缓存
      String newData = 'Fetched from network at ${DateTime.now()}';
      await _cacheSync.set('myKey', newData);
      setState(() {
        _cachedData = newData;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Local Cache Sync Demo'),
      ),
      body: Center(
        child: Text(
          _cachedData ?? 'Loading...',
          style: TextStyle(fontSize: 24),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          // 更新缓存数据
          String updatedData = 'Updated at ${DateTime.now()}';
          await _cacheSync.set('myKey', updatedData);
          setState(() {
            _cachedData = updatedData;
          });
        },
        tooltip: 'Update Data',
        child: Icon(Icons.edit),
      ),
    );
  }
}

在这个示例中,我们做了以下几件事:

  1. 依赖管理:在pubspec.yaml文件中添加了local_cache_sync依赖。
  2. 实例化插件:在_MyHomePageState类中实例化了LocalCacheSync对象。
  3. 数据加载:在initState方法中尝试从本地缓存中获取数据。如果缓存中有数据,则直接显示;否则,模拟从网络获取数据并同步到本地缓存。
  4. 数据更新:提供了一个浮动操作按钮(FAB),点击后可以更新缓存中的数据并刷新UI。

请注意,这个示例是基于假设的API设计。实际使用时,你需要根据local_cache_sync插件的文档和API来调整代码。特别是插件的实例化和数据操作方法(如getset)可能会有所不同。因此,务必参考插件的官方文档和示例代码。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!