Flutter偏好设置构建插件katana_prefs_builder的使用
Flutter偏好设置构建插件katana_prefs_builder的使用
Katana Prefs
[GitHub] | [YouTube] | [Packages] | [Twitter] | [Threads] | [LinkedIn] | [mathru.net]
简介 #
SharedPreferences 是一个非常有用的插件。
我认为这个插件是存储应用简单数据的最佳方式。
然而,在使用系统时,我有一些抱怨:
- 需要记住键,因为键将是字符串类型。
- 需要记住要检索的值的类型取决于键。
- SharedPreferences 的实例需要异步获取。
在大多数情况下,我认为它们被封装在一个单独的类中以使其更容易使用。
为了克服上述问题,我创建了以下包:
- 使用类似 Freezed 的符号自动生成读取/写入 SharedPreferences 数据的类
- 参数类型和键预定义,允许类型安全实现
- 缓存 SharedPreferences 实例,以便可以同步检索数据
- 继承自
ChangeNotifier
,因此可以检测到值的变化并执行相应的操作。
例如,可以使用以下声明:
@prefs
class PrefsValue with _$PrefsValue, ChangeNotifier {
factory PrefsValue({
String? userToken,
required double volumeSetting,
}) = _PrefsValue;
}
当使用 build_runner 运行此代码时,会自动生成一个可以读取和写入 SharedPreferences 数据的类。
通过定义这个类,可以在任何地方读取和写入数据。
final appPrefs = PrefsValue(volumeSetting: 0.5);
class PrefsPage extends StatefulWidget {
const PrefsPage({super.key});
@override
State<StatefulWidget> createState() => PrefsPageState();
}
class PrefsPageState extends State<PrefsPage> {
@override
void initState() {
super.initState();
prefs.addListener(() {
setState(() {});
});
appPrefs.load();
}
@override
Widget build(BuildContext context, WidgetRef ref){
final volumeSetting = appPrefs.volumeSetting.get();
// 更新音量设置
appPrefs.volumeSetting.set(1.0); // 在这时,appPrefs 也会通知更改,并重新更新小部件。
}
}
安装 #
导入以下包以使用 build_runner 进行代码生成。
flutter pub add katana_prefs
flutter pub add --dev build_runner
flutter pub add --dev katana_prefs_builder
实现 #
创建类 #
创建如下类:
添加 part '(filename).prefs.dart';
。
将定义的类注释为 @prefs
并混合 _$ (定义的类名)
和 ChangeNotifier
。
构造函数在 factory
中创建,并定义参数中使用的值。
(标记为 required
的值是必填的;如果没有标记为 required
,则保持原样。)
在构造函数之后,写上 = _ (定义的类名)
。
// prefs_value.dart
import 'package:flutter/material.dart';
import 'package:katana_prefs/katana_prefs.dart';
part 'prefs_value.prefs.dart';
@prefs
class PrefsValue with _$PrefsValue, ChangeNotifier {
factory PrefsValue({
String? userToken,
required double volumeSetting,
}) = _PrefsValue;
}
代码生成 #
通过输入以下命令进行自动代码生成。
flutter pub run build_runner build --delete-conflicting-outputs
如何使用 #
全局定义值。
在创建对象时,输入 required
中指定的值。这将是初始值。
final appPrefs = PrefsValue(volumeSetting: 0.5);
在加载第一个值之前,调用 load()
方法并等待其完成。
(也可以通过监视 loading
字段来等待结束。)
@Override
void initState() {
super.initState();
appPrefs.load();
}
如果需要,可以使用 addListener
监控状态。
@Override
void initState() {
super.initState();
prefs.addListener(() {
setState(() {});
});
appPrefs.load();
}
可以通过 appPrefs.(定义的值).get()
从 SharedPreference 中检索数据。
final volumeSetting = appPrefs.volumeSetting.get();
可以通过 appPrefs.(定义的值).set(value)
将数据存储在 SharedPreference 中。
保存完成后,将调用 notifyListeners()
执行由 addListener
监视的回调。
appPrefs.volumeSetting.set(1.0);
更多关于Flutter偏好设置构建插件katana_prefs_builder的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter偏好设置构建插件katana_prefs_builder的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是一个关于如何在Flutter项目中使用katana_prefs_builder
插件来构建偏好设置的示例代码。katana_prefs_builder
插件简化了使用SharedPreferences进行偏好设置管理的过程,并允许你声明式地构建UI。
首先,确保你已经在pubspec.yaml
文件中添加了katana_prefs_builder
和shared_preferences
依赖:
dependencies:
flutter:
sdk: flutter
katana_prefs_builder: ^最新版本号 # 请替换为最新版本号
shared_preferences: ^2.0.15 # 请检查是否有更新的版本
然后,运行flutter pub get
来安装依赖。
接下来,按照以下步骤在你的Flutter应用中集成katana_prefs_builder
:
- 初始化SharedPreferences:
在你的应用的主入口文件(通常是main.dart
)中,初始化SharedPreferences
。
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:katana_prefs_builder/katana_prefs_builder.dart';
import 'preferences_page.dart'; // 假设你有一个单独的页面来处理偏好设置
void main() async {
WidgetsFlutterBinding.ensureInitialized();
SharedPreferences prefs = await SharedPreferences.getInstance();
runApp(MyApp(prefs: prefs));
}
class MyApp extends StatelessWidget {
final SharedPreferences prefs;
MyApp({required this.prefs});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: PreferencesPage(prefs: prefs),
);
}
}
- 创建偏好设置页面:
在你的preferences_page.dart
文件中,使用KatanaPrefsBuilder
来构建偏好设置UI。
import 'package:flutter/material.dart';
import 'package:katana_prefs_builder/katana_prefs_builder.dart';
class PreferencesPage extends StatelessWidget {
final SharedPreferences prefs;
PreferencesPage({required this.prefs});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Preferences'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: KatanaPrefsBuilder(
prefs: prefs,
builders: [
// 示例:开关偏好设置
PrefsBuilder<bool>(
key: 'dark_mode',
defaultValue: false,
builder: (context, value) {
return SwitchListTile(
title: Text('Dark Mode'),
value: value,
onChanged: (newValue) {
prefs.setBool('dark_mode', newValue);
},
);
},
),
// 示例:文本偏好设置
PrefsBuilder<String>(
key: 'username',
defaultValue: '',
builder: (context, value) {
return TextFieldListTile(
title: Text('Username'),
value: value,
onChanged: (newValue) {
prefs.setString('username', newValue);
},
);
},
),
],
),
),
);
}
}
// 自定义TextFieldListTile组件(因为KatanaPrefsBuilder没有内置的TextFieldListTile)
class TextFieldListTile extends StatelessWidget {
final String title;
final String value;
final ValueChanged<String> onChanged;
TextFieldListTile({required this.title, required this.value, required this.onChanged});
@override
Widget build(BuildContext context) {
return ListTile(
leading: Icon(Icons.edit),
title: Text(title),
trailing: TextField(
decoration: InputDecoration(border: InputBorder.none),
controller: TextEditingController(text: value),
onChanged: (newValue) {
onChanged(newValue);
},
onEditingComplete: () {
// 确保在编辑完成后也更新值(如果需要)
final controller = TextEditingController.fromValue(
TextEditingValue(text: newValue),
);
controller.dispose();
},
),
);
}
}
这个示例展示了如何使用KatanaPrefsBuilder
来管理一个简单的开关和一个文本字段的偏好设置。你可以根据需要添加更多的偏好设置项,每个设置项都使用PrefsBuilder
来定义。
注意:TextFieldListTile
是一个自定义组件,因为KatanaPrefsBuilder
本身可能没有提供所有类型的现成组件。你可以根据需要创建其他类型的自定义组件。
这个示例提供了一个基本的框架,你可以根据实际需求进一步扩展和自定义。