持久化存储架构：键值数据

大多数 Flutter 应用，无论大小，都会在某个时候需要在用户设备上存储数据，例如 API 密钥、用户偏好设置或需要离线可用的数据。

在本指南中，你将学习如何在使用推荐的 Flutter 架构设计的 Flutter 应用中集成键值数据的持久化存储。如果你还不熟悉如何将数据存储到磁盘，可以阅读在磁盘上存储键值数据指南。

键值存储通常用于保存简单数据，例如应用配置，在本指南中，你将用它来保存深色模式偏好设置。如果你想学习如何在设备上存储复杂数据，你可能需要使用 SQL。在这种情况下，请查看本指南之后的另一个指南，名为持久化存储架构：SQL。

示例应用包含一个单一屏幕，顶部是应用栏，中间是项目列表，底部是文本输入框。

ToDo application in light mode

在 AppBar 中，一个 Switch 允许用户在深色和浅色主题模式之间切换。此设置会立即应用，并使用键值数据存储服务存储在设备中。当用户再次启动应用时，该设置会恢复。

ToDo application in dark mode

此功能遵循推荐的 Flutter 架构设计模式，包含一个展示层和一个数据层。

展示层包含 ThemeSwitch 组件和 ThemeSwitchViewModel。
数据层包含 ThemeRepository 和 SharedPreferencesService。

ThemeSwitch 是一个 StatelessWidget，其中包含一个 Switch 组件。开关的状态由 ThemeSwitchViewModel 中的公共字段 isDarkMode 表示。当用户点击开关时，代码会执行视图模型中的 toggle 命令。

dartclass ThemeSwitch extends StatelessWidget {
  const ThemeSwitch({super.key, required this.viewmodel});

  final ThemeSwitchViewModel viewmodel;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16.0),
      child: Row(
        children: [
          const Text('Dark Mode'),
          ListenableBuilder(
            listenable: viewmodel,
            builder: (context, _) {
              return Switch(
                value: viewmodel.isDarkMode,
                onChanged: (_) {
                  viewmodel.toggle.execute();
                },
              );
            },
          ),
        ],
      ),
    );
  }
}

ThemeSwitchViewModel 实现了一个视图模型，如 MVVM 模式中所述。此视图模型包含 ThemeSwitch 组件的状态，由布尔变量 _isDarkMode 表示。

该视图模型使用 ThemeRepository 来存储和加载深色模式设置。

它包含两个不同的命令操作：load（从存储库加载深色模式设置）和 toggle（在深色模式和浅色模式之间切换状态）。它通过 isDarkMode getter 暴露状态。

_load 方法实现了 load 命令。此方法调用 ThemeRepository.isDarkMode 来获取存储的设置，并调用 notifyListeners() 来刷新 UI。

_toggle 方法实现了 toggle 命令。此方法调用 ThemeRepository.setDarkMode 来存储新的深色模式设置。同时，它会更改 _isDarkMode 的本地状态，然后调用 notifyListeners() 来更新 UI。

dartclass ThemeSwitchViewModel extends ChangeNotifier {
  ThemeSwitchViewModel(this._themeRepository) {
    load = Command0(_load)..execute();
    toggle = Command0(_toggle);
  }

  final ThemeRepository _themeRepository;

  bool _isDarkMode = false;

  /// If true show dark mode
  bool get isDarkMode => _isDarkMode;

  late Command0 load;

  late Command0 toggle;

  /// Load the current theme setting from the repository
  Future<Result<void>> _load() async {
    try {
      final result = await _themeRepository.isDarkMode();
      if (result is Ok<bool>) {
        _isDarkMode = result.value;
      }
      return result;
    } on Exception catch (e) {
      return Result.error(e);
    } finally {
      notifyListeners();
    }
  }

  /// Toggle the theme setting
  Future<Result<void>> _toggle() async {
    try {
      _isDarkMode = !_isDarkMode;
      return await _themeRepository.setDarkMode(_isDarkMode);
    } on Exception catch (e) {
      return Result.error(e);
    } finally {
      notifyListeners();
    }
  }
}

遵循架构指南，数据层分为两部分：ThemeRepository 和 SharedPreferencesService。

ThemeRepository 是所有主题配置设置的单一事实来源，并处理来自服务层的任何可能错误。

在此示例中，ThemeRepository 还通过一个可观察的 Stream 暴露深色模式设置。这允许应用的其他部分订阅深色模式设置的更改。

ThemeRepository 依赖于 SharedPreferencesService。存储库从服务获取存储的值，并在其更改时存储它。

setDarkMode() 方法将新值传递给 StreamController，以便任何监听 observeDarkMode 流的组件

dartclass ThemeRepository {
  ThemeRepository(this._service);

  final _darkModeController = StreamController<bool>.broadcast();

  final SharedPreferencesService _service;

  /// Get if dark mode is enabled
  Future<Result<bool>> isDarkMode() async {
    try {
      final value = await _service.isDarkMode();
      return Result.ok(value);
    } on Exception catch (e) {
      return Result.error(e);
    }
  }

  /// Set dark mode
  Future<Result<void>> setDarkMode(bool value) async {
    try {
      await _service.setDarkMode(value);
      _darkModeController.add(value);
      return Result.ok(null);
    } on Exception catch (e) {
      return Result.error(e);
    }
  }

  /// Stream that emits theme config changes.
  /// ViewModels should call [isDarkMode] to get the current theme setting.
  Stream<bool> observeDarkMode() => _darkModeController.stream;
}

SharedPreferencesService 封装了 SharedPreferences 插件功能，并调用 setBool() 和 getBool() 方法来存储深色模式设置，从而将此第三方依赖项隐藏起来，不暴露给应用的其他部分。

dartclass SharedPreferencesService {
  static const String _kDarkMode = 'darkMode';

  Future<void> setDarkMode(bool value) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setBool(_kDarkMode, value);
  }

  Future<bool> isDarkMode() async {
    final prefs = await SharedPreferences.getInstance();
    return prefs.getBool(_kDarkMode) ?? false;
  }
}

在此示例中，ThemeRepository 和 SharedPreferencesService 是在 main() 方法中创建的，并作为构造函数参数依赖项传递给 MainApp。

dartvoid main() {
  // ···
  runApp(
    MainApp(
      themeRepository: ThemeRepository(SharedPreferencesService()),
      // ···
    ),
  );
}

然后，创建 ThemeSwitch 时，也创建 ThemeSwitchViewModel 并将 ThemeRepository 作为依赖项传入。

dartThemeSwitch(
  viewmodel: ThemeSwitchViewModel(widget.themeRepository),
),

示例应用还包括 MainAppViewModel 类，该类监听 ThemeRepository 中的更改，并将深色模式设置暴露给 MaterialApp 组件。

dartclass MainAppViewModel extends ChangeNotifier {
  MainAppViewModel(this._themeRepository) {
    _subscription = _themeRepository.observeDarkMode().listen((isDarkMode) {
      _isDarkMode = isDarkMode;
      notifyListeners();
    });
    _load();
  }

  final ThemeRepository _themeRepository;
  StreamSubscription<bool>? _subscription;

  bool _isDarkMode = false;

  bool get isDarkMode => _isDarkMode;

  Future<void> _load() async {
    try {
      final result = await _themeRepository.isDarkMode();
      if (result is Ok<bool>) {
        _isDarkMode = result.value;
      }
    } on Exception catch (_) {
      // handle error
    } finally {
      notifyListeners();
    }
  }

  @override
  void dispose() {
    _subscription?.cancel();
    super.dispose();
  }
}

dartListenableBuilder(
  listenable: _viewModel,
  builder: (context, child) {
    return MaterialApp(
      theme: _viewModel.isDarkMode ? ThemeData.dark() : ThemeData.light(),
      home: child,
    );
  },
  child: //...
)

此页面内容有帮助吗？

感谢你的反馈！

提供详情

感谢你的反馈！请告诉我们如何改进。

提供详情

除非另有说明，本网站上的文档反映了 Flutter 的最新稳定版本。页面最后更新于 2025-06-26。查看源代码或报告问题。

持久化存储架构：键值数据

示例应用：带主题选择的应用

存储主题选择的键值数据

主题选择的展示层

主题选择的数据层

整合所有概念