内容

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

内容

示例应用：带有主题选择的 App
存储主题选择键值数据
- 主题选择展示层
- 主题选择数据层
整合所有部分

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

在本篇菜谱中，您将学习如何在使用推荐的 Flutter 架构设计的 Flutter 应用程序中集成键值数据的持久存储。如果您完全不熟悉将数据存储到磁盘，可以阅读在磁盘上存储键值数据的菜谱。

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

示例应用程序包含一个屏幕，顶部有应用栏，中间有项目列表，底部有文本字段输入。

ToDo application in light mode

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

ToDo application in dark mode

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

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

ThemeSwitch 是一个包含 Switch 组件的 StatelessWidget。开关的状态由 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 _kDartMode = 'darkMode';

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

  Future<bool> isDarkMode() async {
    final prefs = await SharedPreferences.getInstance();
    return prefs.getBool(_kDartMode) ?? 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 的最新稳定版本。页面最后更新于 2024-11-24。查看源代码或报告问题。

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

存储主题选择键值数据

主题选择展示层

主题选择数据层

整合所有部分