Flutter本地缓存同步插件local_cache_sync的使用
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
更多关于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),
),
);
}
}
在这个示例中,我们做了以下几件事:
- 依赖管理:在
pubspec.yaml
文件中添加了local_cache_sync
依赖。 - 实例化插件:在
_MyHomePageState
类中实例化了LocalCacheSync
对象。 - 数据加载:在
initState
方法中尝试从本地缓存中获取数据。如果缓存中有数据,则直接显示;否则,模拟从网络获取数据并同步到本地缓存。 - 数据更新:提供了一个浮动操作按钮(FAB),点击后可以更新缓存中的数据并刷新UI。
请注意,这个示例是基于假设的API设计。实际使用时,你需要根据local_cache_sync
插件的文档和API来调整代码。特别是插件的实例化和数据操作方法(如get
和set
)可能会有所不同。因此,务必参考插件的官方文档和示例代码。