Flutter设置管理插件sp_settings的使用

sp_settings 是一个与 SharedPreferences 集成的 Flutter 设置屏幕包。

特性

• 仅外部依赖：唯一的外部依赖是 shared_preferences
• 一致的设计模式
• 直接将值更改存储到 SharedPreferences

开始使用

在你的项目中添加 sp_settings：

flutter pub add sp_settings

使用示例

以下是一个基本的设置屏幕层次结构示例。

基本设置字段

import 'package:sp_settings/fields/settings_field.dart';
import 'package:sp_settings/fields/settings_list.dart';
import 'package:sp_settings/fields/switch_settings_field.dart';

SettingsList(
    fields: [
        SwitchSettingsField(
            settingsField: SettingsField(
                title: '示例',
                description: '这是一个示例。',
                icon: Icons.add,
            ),
            prefKey: 'example',
        ),
    ]
);

分类设置列表

设置列表可以被 SettingsCategory 包围，允许进行清晰的分隔：

import 'package:sp_settings/settings_category.dart';

SettingsCategory(
  title: '分类标题',
  settingsList: <SettingsList>,
);

完整示例

以下是一个完整的示例代码，展示了如何使用 sp_settings 创建一个包含多种设置类型的设置屏幕。

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '设置表单',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(title: '设置表单演示'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView(
        children: [
          const SettingsCategory(
              title: '常规',
              settingsList: SettingsList([
                SwitchSettingsField(
                  SettingsField(
                    title: '示例',
                    description: '这是一个示例。',
                    icon: Icons.add,
                  ),
                  prefKey: 'example1',
                ),
              ])),
          SettingsCategory(
            title: '其他',
            settingsList: SettingsList([
              const SwitchSettingsField(
                SettingsField(
                  title: '长文本开关',
                  description: 
                      '这是一个示例。描述非常长，达到三行。',
                  icon: Icons.folder,
                ),
                prefKey: 'example2',
              ),
              ButtonSettingsField(
                const SettingsField(
                  title: '可点击',
                  description: '这里有一个可以点击的按钮设置。',
                  icon: Icons.person_off,
                ),
                onTap: () {},
              ),
              const PopupSettingsField(
                SettingsField(
                  title: '弹出菜单',
                  description: '这里有一个弹出菜单！请选择其中一个选项。',
                  icon: Icons.drive_eta,
                ),
                prefKey: 'popup',
                items: {
                  '无': 'null',
                  '苹果': 'a',
                  '香蕉': 'b',
                  '胡萝卜': 'c',
                  '柠檬': 'l',
                  '草莓': 's',
                },
                initialValue: 'null',
              ),
              const CheckboxSettingsField(
                SettingsField(
                  title: '复选框',
                  description: '这里有两个选项可以选择。',
                  icon: Icons.check_box_outline_blank,
                ),
                prefKey: 'checkbox',
              ),
            ]),
          )
        ],
      ),
    );
  }
}