Flutter偏好设置构建插件katana_prefs_builder的使用

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

Flutter偏好设置构建插件katana_prefs_builder的使用


Masamune logo

Katana Prefs

Follow on Twitter Follow on Threads Maintained with Melos

GitHub Sponsor


[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

1 回复

更多关于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_buildershared_preferences依赖:

dependencies:
  flutter:
    sdk: flutter
  katana_prefs_builder: ^最新版本号  # 请替换为最新版本号
  shared_preferences: ^2.0.15  # 请检查是否有更新的版本

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

接下来,按照以下步骤在你的Flutter应用中集成katana_prefs_builder

  1. 初始化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),
    );
  }
}
  1. 创建偏好设置页面

在你的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本身可能没有提供所有类型的现成组件。你可以根据需要创建其他类型的自定义组件。

这个示例提供了一个基本的框架,你可以根据实际需求进一步扩展和自定义。

回到顶部