Flutter偏好设置管理插件prefs_config的使用

这个dart包与shared preferences插件一起工作，可以用于为Flutter应用自动生成设置或偏好屏幕。

使用

这个包包含三个主要的对象供使用。

Pref 用于定义在屏幕上显示的偏好。
Prefs 可以用来保存这些偏好并进行管理。
PreferenceContainer 是一个StatefulWidget，它将构建一个屏幕，使用户可以查看和编辑这些偏好。

Pref 类

这个对象允许描述一个偏好，不仅包括数据方面，还包括在偏好屏幕上的行为。以下是它的属性：

prefKey。字符串。这是识别偏好的键。除了特殊偏好类型外，可以通过Prefs对象或shared preferences插件通过相同的键来获取或设置任何偏好。
type。整数。偏好的类型。注意，这些主要是显示类型，而不是数据类型。前六种处理bool、String、int和DateTime数据类型，最后两种是特殊的类型，不是真正的偏好，而是UI元素。这些是：
- Bool。布尔偏好类型。format属性可能被用作开关或复选框输入。默认是作为开关输入。
- Text。字符串偏好类型。format属性可能被用作纯文本、URI、电话号码或电子邮件。默认是作为纯文本。
- Int。整数偏好类型。format属性可能被用作文本输入或使用滑块（后者需要max和min属性）。默认是作为文本输入。
- Date。日期时间偏好类型。format属性可能被用作dd/mm/yyyy、mm/dd/yyyy或yyyy/mm/dd格式。默认是dd/mm/yyyy。
- Time。日期时间偏好类型。
- List。整数偏好类型。format属性可能被用作下拉菜单或单独的对话框输入。默认是作为下拉菜单输入。
- Header。特殊偏好类型。列表头子标签。defVal属性可以用来分配背景颜色。
- Function。特殊偏好类型。一个列表项，点击时会调用一个函数。
defVal。动态值。偏好首次创建时的默认值。
visible。布尔值。表示偏好是否出现在生成的偏好屏幕上。默认为true。
enabled。布尔值。表示偏好是否在生成的偏好屏幕上启用。默认为true。
dependancy。字符串。一个偏好可以通过此属性覆盖其启用属性。如果值设置为布尔类型偏好的键，则将其设置为该偏好当前的值。注意，这不会改变偏好的值，只是是否在生成的偏好屏幕上启用。
function。函数。当点击函数类型偏好时要调用的函数。
listItems。Map<int,String>。仅用于列表类型偏好。Map对象用于选项值和选项标签。列表类型偏好的最终值将是整数。
label。字符串。显示在生成的偏好屏幕上偏好磁贴上的标题，也作为任何头部类型偏好的文本。
description。字符串。显示在生成的偏好屏幕上偏好磁贴标题下方的短描述。
format。整数。某些偏好类型可能被格式化以接受特定输入。请参阅上面的type属性以获取更多信息。
max。整数。允许的最大大小。对于整数类型偏好，未来的天数；对于日期类型偏好，未来的天数；对于文本类型偏好，允许的最大长度。
min。整数。允许的最小大小。对于整数类型偏好，过去的天数；对于日期类型偏好，过去的天数；对于文本类型偏好，允许的最小长度。

Prefs 类

要初始化此类，必须提交一个偏好项列表，这些项按它们将在屏幕上显示的顺序排列。

Prefs p = Prefs(
  preferences: [
    Pref(
      prefKey: "txt_plain",
      type: Pref.TYPE_TEXT,
      defVal: "foobar",
      min: 1, // 文本偏好最小长度 - 1 表示不能为空。
      label: "Text Pref",
      description: "This is a Text Setting"
    ),
    Pref(
      prefKey: "bol_switch",
      type: Pref.TYPE_BOOL,
      defVal: true,
      label: "Bool Switch Pref",
      format: Pref.FORMAT_BOOL_SWITCH,
      description: "This is a Bool Switch Setting"
    ),
  ]
);

这个类包含了字符串、整数、布尔值和日期时间等主要偏好数据类型的getter和setter。这些是可互换的，与相应的shared preferences方法（实际上使用它们），但还管理相应的Pref值和生成的偏好屏幕显示。

此外，这个类还提供了一些辅助方法来管理Pref项，并且有一个方法来启动生成的偏好屏幕。

p.buildPreferencesScreen(context, 'My Preferences Screen');

PreferenceContainer 类

这个类是一个StatefulWidget，它会调用偏好屏幕。它可以通过Prefs类的buildPreferencesScreen方法调用，如上所示，也可以直接使用以下构造函数：

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => PreferenceContainer(
      preferences: this.preferences,
      title: title
    )
  )
);

示例代码

以下是一个完整的示例代码，展示了如何使用prefs_config插件创建一个偏好设置界面。

import 'package:flutter/material.dart';
import 'package:prefs_config/prefs_config.dart';

class PrefsExample extends StatefulWidget {
  [@override](/user/override)
  State<PrefsExample> createState() => _PrefsExampleState();
}

class _PrefsExampleState extends State<PrefsExample> {
  late Prefs p;
  late String prefScreenTitle;

  [@override](/user/override)
  void initState() {
    // 用于生成偏好屏幕的标题。
    this.prefScreenTitle = "Example Settings";

    // 示例列表偏好选项
    Map<int, String> myList = {};
    for (int i = 0; i < 20; i++) myList[i] = 'Option ' + (i + 1).toString();

    /// Pref 对象使用的属性如下：
    ///
    /// prefKey: 用于标识偏好的唯一标识键。
    /// type: 基于整数的类别，表示偏好类型。
    /// defVal: 动态属性，表示偏好的默认值。
    /// label: 在偏好屏幕上使用的偏好标题。
    /// description: 在偏好屏幕上使用的偏好描述文本。
    /// visible: 是否可以通过偏好屏幕编辑偏好。
    /// enabled: 是否启用偏好（不影响头部）。
    /// format: 一个可选值，影响偏好在编辑时的行为/外观。
    ///
    /// 下面是一些属性的附加说明。
    List<Pref> prefs = [
      Pref(
          prefKey: "txt_plain",
          type: Pref.TYPE_TEXT,
          defVal: "foobar",
          min: 1, // 文本偏好最小长度 - 1 表示不能为空。
          max: 10, // 文本偏好数字最大长度。
          label: "Text Pref",
          description: "This is a Text Setting"),
      Pref(
          prefKey: "txt_hidden",
          type: Pref.TYPE_TEXT,
          defVal: "foobar",
          visible: false),
      Pref(
          prefKey: "bol_switch",
          type: Pref.TYPE_BOOL,
          defVal: false,
          label: "Bool Switch Pref",
          format: Pref.FORMAT_BOOL_SWITCH,
          description: "This is a Bool Switch Setting"),
      Pref(
          prefKey: "bol_switch_dis",
          type: Pref.TYPE_BOOL,
          defVal: false,
          label: "Bool Switch Pref (disabled)",
          enabled: false,
          format: Pref.FORMAT_BOOL_SWITCH,
          description: "This is a Bool Switch Setting"),
      Pref(
          prefKey: "lst_options1",
          type: Pref.TYPE_LIST,
          defVal: 6,
          label: "List Pref",
          format: Pref.FORMAT_LIST_DIALOG,
          listItems: myList,
          description: "This is a Dialog List Setting"),
      Pref(
          prefKey: "lst_options2",
          type: Pref.TYPE_LIST,
          defVal: 6,
          label: "List Pref",
          listItems: myList,
          description: "This is a Dropdown List Setting"),
      Pref(
          prefKey: "bol_check",
          type: Pref.TYPE_BOOL,
          defVal: false,
          label: "Bool CheckboxPref",
          format: Pref.FORMAT_BOOL_CHECKBOX,
          description: "This is a Bool Checkbox Setting"),
      Pref(
          prefKey: "txt_number",
          type: Pref.TYPE_INT,
          defVal: 45,
          label: "Number Pref",
          description: "This is a Number Textbox Setting"),
      Pref(
          prefKey: "sdr_number",
          type: Pref.TYPE_INT,
          defVal: 45,
          min: 0, // 滑块上的整数最小值
          max: 100, // 滑块上的整数最大值
          format: Pref.FORMAT_INT_SLIDER,
          label: "Number Pref (Slider)",
          description: "This is a Number Slider Setting"),
      Pref(
          prefKey: "dt_day",
          type: Pref.TYPE_DATE,
          defVal: 20180124,
          dependancy: 'bol_switch',
          label: "Date Pref",
          format: Pref.FORMAT_DATE_YMD,
          description: "This is a Date Setting"),
      Pref(
          prefKey: "dt_time",
          type: Pref.TYPE_TIME,
          defVal: "20180124T132700",
          label: "Time Pref",
          description: "This is a Time Setting"),
      Pref(
        prefKey: "hdr",
        type: Pref.TYPE_HEADER,
        label: "Setting Header",
        defVal: Colors.white30, // 头部的背景颜色
      ),
      Pref(
          prefKey: "func_test",
          type: Pref.TYPE_FUNCTION,
          function: testFunction, // 当偏好项被点击时调用的函数名称
          label: "Function Pref",
          description: "This is a Function Setting"),
      Pref(
          prefKey: "txt_email",
          type: Pref.TYPE_TEXT,
          defVal: "test@test.com",
          format: Pref.FORMAT_TEXT_EMAIL,
          label: "Email Pref",
          description: "This is an Email String Setting"),
      Pref(
          prefKey: "txt_phone",
          type: Pref.TYPE_TEXT,
          defVal: "+41798521111",
          format: Pref.FORMAT_TEXT_PHONE,
          label: "Phone Pref",
          description: "This is an Phone String Setting"),
      Pref(
          prefKey: "txt_uri",
          type: Pref.TYPE_TEXT,
          defVal: "http://www.google.com",
          format: Pref.FORMAT_TEXT_URI,
          label: "URL Pref",
          description: "This is an URL Setting"),
    ];

    this.p = Prefs(preferences: prefs);

    super.initState();
  }

  // 这是func_test调用的函数
  void testFunction() {
    showAboutDialog(context: context);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      child: Center(
          child: RaisedButton(
        onPressed: () => this.p.buildPreferencesScreen(context, this.prefScreenTitle),
        child: Text("Launch"),
      )),
    );
  }
}

更多关于Flutter偏好设置管理插件prefs_config的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

htzhanglong 1楼作者

更多关于Flutter偏好设置管理插件prefs_config的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

prefs_config 是一个用于管理 Flutter 应用偏好设置的插件。它简化了与 SharedPreferences 的交互，使得开发者可以更方便地存储和检索应用设置。prefs_config 提供了一个类型安全的方式来定义和访问偏好设置，减少了手动处理 SharedPreferences 的复杂性。

安装

首先，你需要在 pubspec.yaml 文件中添加 prefs_config 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  prefs_config: ^0.2.0

然后运行 flutter pub get 来安装插件。

使用步骤

1. 创建配置类

首先，你需要创建一个类来定义你的偏好设置。这个类将使用 PrefsConfig 注解来指定每个设置的名称、默认值以及类型。

import 'package:prefs_config/prefs_config.dart';

@PrefsConfig()
class AppSettings {
  @PrefsField(defaultValue: "John Doe")
  String userName;

  @PrefsField(defaultValue: 25)
  int userAge;

  @PrefsField(defaultValue: true)
  bool isDarkMode;
}

2. 初始化配置

在你的应用的入口点（例如 main.dart 文件中），初始化 PrefsConfig。

import 'package:flutter/material.dart';
import 'package:prefs_config/prefs_config.dart';

import 'app_settings.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化 PrefsConfig
  await PrefsConfig.init(settings: AppSettings());

  runApp(MyApp());
}

3. 访问和更新设置

在你的应用中，你可以通过 PrefsConfig 的 instance 来访问和更新偏好设置。

import 'package:flutter/material.dart';
import 'package:prefs_config/prefs_config.dart';

import 'app_settings.dart';

class SettingsPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final settings = PrefsConfig.instance<AppSettings>();

    return Scaffold(
      appBar: AppBar(
        title: Text('Settings'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('User Name: ${settings.userName}'),
            Text('User Age: ${settings.userAge}'),
            Switch(
              value: settings.isDarkMode,
              onChanged: (value) {
                settings.isDarkMode = value;
                PrefsConfig.save();
              },
            ),
          ],
        ),
      ),
    );
  }
}