MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Flutter SharedPreferences与状态管理：结合使用的场景

2021-09-193.5k 阅读

Flutter SharedPreferences概述

Flutter中的SharedPreferences是一个轻量级的持久化存储解决方案，它允许开发者将简单的数据（如布尔值、整数、字符串、双精度浮点数和字符串列表）存储在设备上。这种存储方式在应用的不同会话之间保持数据的持久性，非常适合存储一些用户设置、应用配置等少量数据。

SharedPreferences的工作原理基于键值对（key - value pairs）。开发者通过一个唯一的键来获取或设置对应的值。例如，如果你想存储用户是否接受了隐私政策，你可以使用一个布尔值，并给它一个合适的键，如“is_privacy_policy_accepted”。

要使用SharedPreferences，首先需要在pubspec.yaml文件中添加依赖：

dependencies:
  shared_preferences: ^2.0.15

然后在代码中导入库：

import 'package:shared_preferences/shared_preferences.dart';

下面是一个简单的示例，展示如何保存和读取一个布尔值：

Future<void> savePrivacyPolicyAccepted() async {
  final SharedPreferences prefs = await SharedPreferences.getInstance();
  await prefs.setBool('is_privacy_policy_accepted', true);
}

Future<bool?> getPrivacyPolicyAccepted() async {
  final SharedPreferences prefs = await SharedPreferences.getInstance();
  return prefs.getBool('is_privacy_policy_accepted');
}

状态管理在Flutter中的重要性

在Flutter应用开发中，状态管理是一个核心概念。随着应用复杂度的增加，管理应用状态变得越来越困难。状态可以理解为应用在不同时刻的数据表示，比如用户登录状态、购物车中的商品列表等。

良好的状态管理可以提高代码的可维护性、可测试性和可扩展性。例如，如果没有合适的状态管理，当应用的某个部分需要更新状态时，可能需要在多个地方进行修改，这会导致代码的耦合度增加，难以理解和维护。

Flutter提供了多种状态管理方案，如setState、InheritedWidget、Provider、Bloc等。setState是最基础的状态管理方式，适用于简单的状态变化，例如一个按钮点击后改变文本颜色。而对于更复杂的应用场景，像跨多个屏幕共享状态或者处理复杂业务逻辑的状态变化，就需要使用更高级的状态管理方案。

Flutter SharedPreferences与状态管理结合使用的场景

用户设置与偏好

用户在应用中常常会进行一些设置，如主题模式（亮色或暗色）、语言选择等。这些设置需要在应用关闭后仍然保持，下次打开应用时能恢复到用户上次设置的状态。

假设我们有一个切换主题模式的功能，代码如下：

enum ThemeMode { light, dark }

Future<void> saveThemeMode(ThemeMode mode) async {
  final SharedPreferences prefs = await SharedPreferences.getInstance();
  await prefs.setString('theme_mode', mode.name);
}

Future<ThemeMode?> getThemeMode() async {
  final SharedPreferences prefs = await SharedPreferences.getInstance();
  final String? modeName = prefs.getString('theme_mode');
  if (modeName == null) {
    return null;
  }
  return ThemeMode.values.firstWhere((e) => e.name == modeName);
}

在状态管理方面，我们可以使用Provider来管理主题状态。首先定义一个主题状态类：

class ThemeState with ChangeNotifier {
  ThemeMode _themeMode = ThemeMode.light;

  ThemeMode get themeMode => _themeMode;

  void setThemeMode(ThemeMode mode) {
    _themeMode = mode;
    saveThemeMode(mode);
    notifyListeners();
  }
}

然后在main.dart中使用Provider：

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => ThemeState(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final themeState = Provider.of<ThemeState>(context);
    return MaterialApp(
      theme: themeState.themeMode == ThemeMode.light? ThemeData.light() : ThemeData.dark(),
      home: HomePage(),
    );
  }
}

在HomePage中，我们可以添加一个切换主题的按钮：

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final themeState = Provider.of<ThemeState>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Theme Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            themeState.setThemeMode(themeState.themeMode == ThemeMode.light? ThemeMode.dark : ThemeMode.light);
          },
          child: Text('Switch Theme'),
        ),
      ),
    );
  }
}

这样，当用户切换主题时，不仅应用界面会实时更新，而且下次打开应用时，主题设置会从SharedPreferences中读取并应用。

登录状态管理

登录状态是应用中常见的一种状态，它决定了用户是否能够访问某些功能或页面。当用户登录成功后，我们可以将登录状态存储在SharedPreferences中，并结合状态管理来控制应用的界面显示。

假设我们有一个简单的登录逻辑：

Future<void> saveLoginStatus(bool isLoggedIn) async {
  final SharedPreferences prefs = await SharedPreferences.getInstance();
  await prefs.setBool('is_logged_in', isLoggedIn);
}

Future<bool?> getLoginStatus() async {
  final SharedPreferences prefs = await SharedPreferences.getInstance();
  return prefs.getBool('is_logged_in');
}

使用Bloc模式来管理登录状态。首先定义LoginState和LoginEvent：

abstract class LoginState {}

class LoggedOut extends LoginState {}

class LoggedIn extends LoginState {}

abstract class LoginEvent {}

class Login extends LoginEvent {}

class Logout extends LoginEvent {}

然后定义LoginBloc：

class LoginBloc extends Bloc<LoginEvent, LoginState> {
  LoginBloc() : super(LoggedOut()) {
    on<Login>((event, emit) async {
      // 模拟登录逻辑
      await Future.delayed(Duration(seconds: 1));
      saveLoginStatus(true);
      emit(LoggedIn());
    });
    on<Logout>((event, emit) async {
      saveLoginStatus(false);
      emit(LoggedOut());
    });
  }
}

在main.dart中使用BlocProvider：

void main() {
  runApp(
    BlocProvider(
      create: (context) => LoginBloc(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LoginPage(),
    );
  }
}

LoginPage中实现登录和注销功能：

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final loginBloc = BlocProvider.of<LoginBloc>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Login Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            BlocBuilder<LoginBloc, LoginState>(
              builder: (context, state) {
                if (state is LoggedOut) {
                  return ElevatedButton(
                    onPressed: () {
                      loginBloc.add(Login());
                    },
                    child: Text('Login'),
                  );
                } else if (state is LoggedIn) {
                  return ElevatedButton(
                    onPressed: () {
                      loginBloc.add(Logout());
                    },
                    child: Text('Logout'),
                  );
                }
                return SizedBox();
              },
            )
          ],
        ),
      ),
    );
  }
}

这样，登录状态会在SharedPreferences中持久化，并且通过Bloc模式在应用中有效地管理，控制界面的显示和交互。

引导页显示控制

很多应用在首次安装后会显示引导页，向用户介绍应用的主要功能。一旦用户浏览过引导页，下次打开应用时就不再显示。这可以通过SharedPreferences和状态管理来实现。

我们先定义保存和读取引导页显示状态的方法：

Future<void> saveOnboardingShown() async {
  final SharedPreferences prefs = await SharedPreferences.getInstance();
  await prefs.setBool('onboarding_shown', true);
}

Future<bool?> getOnboardingShown() async {
  final SharedPreferences prefs = await SharedPreferences.getInstance();
  return prefs.getBool('onboarding_shown');
}

使用InheritedWidget来管理引导页显示状态。首先定义OnboardingState和OnboardingInheritedWidget：

class OnboardingState {
  bool isOnboardingShown;

  OnboardingState({required this.isOnboardingShown});
}

class OnboardingInheritedWidget extends InheritedWidget {
  final OnboardingState state;

  OnboardingInheritedWidget({required Widget child, required this.state}) : super(child: child);

  static OnboardingState of(BuildContext context) {
    final OnboardingInheritedWidget? result = context.dependOnInheritedWidgetOfExactType<OnboardingInheritedWidget>();
    assert(result != null, 'No OnboardingInheritedWidget found in context');
    return result!.state;
  }

  @override
  bool updateShouldNotify(OnboardingInheritedWidget oldWidget) {
    return state.isOnboardingShown != oldWidget.state.isOnboardingShown;
  }
}

在main.dart中使用OnboardingInheritedWidget：

void main() async {
  final bool? onboardingShown = await getOnboardingShown();
  final OnboardingState state = OnboardingState(isOnboardingShown: onboardingShown ?? false);
  runApp(
    OnboardingInheritedWidget(
      state: state,
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: getHomePage(context),
    );
  }

  Widget getHomePage(BuildContext context) {
    final onboardingState = OnboardingInheritedWidget.of(context);
    if (onboardingState.isOnboardingShown) {
      return HomePage();
    } else {
      return OnboardingPage(
        onDismissed: () {
          saveOnboardingShown();
          final OnboardingState state = OnboardingState(isOnboardingShown: true);
          (context.findAncestorWidgetOfExactType<OnboardingInheritedWidget>() as OnboardingInheritedWidget).state = state;
        },
      );
    }
  }
}

OnboardingPage和HomePage的简单实现：

class OnboardingPage extends StatelessWidget {
  final VoidCallback onDismissed;

  OnboardingPage({required this.onDismissed});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Onboarding'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: onDismissed,
          child: Text('Finish Onboarding'),
        ),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Text('Welcome to the app'),
      ),
    );
  }
}

通过这种方式，引导页的显示状态在SharedPreferences中保存，并且通过InheritedWidget在应用中有效地管理，决定应用启动时显示引导页还是主页。

缓存数据

在一些应用中，为了提高性能，会缓存一些数据。例如，一个新闻应用可能会缓存最新的新闻列表，这样在没有网络连接时也能显示部分内容。SharedPreferences可以用来存储一些简单的缓存数据，如新闻标题列表、文章摘要等。

假设我们有一个简单的新闻缓存功能：

Future<void> saveNewsCache(List<String> newsTitles) async {
  final SharedPreferences prefs = await SharedPreferences.getInstance();
  await prefs.setStringList('news_cache', newsTitles);
}

Future<List<String>?> getNewsCache() async {
  final SharedPreferences prefs = await SharedPreferences.getInstance();
  return prefs.getStringList('news_cache');
}

使用Riverpod来管理新闻缓存状态。首先定义NewsCacheProvider：

final newsCacheProvider = StateProvider<List<String>?>((ref) => null);

Future<void> fetchNewsAndCache(BuildContext context) async {
  // 模拟网络请求获取新闻标题
  final List<String> newsTitles = ['News 1', 'News 2', 'News 3'];
  await saveNewsCache(newsTitles);
  final ref = Provider.of<ProviderContainer>(context, listen: false).read;
  ref(newsCacheProvider.notifier).state = newsTitles;
}

在页面中使用newsCacheProvider：

class NewsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final newsCache = useProvider(newsCacheProvider);
    return Scaffold(
      appBar: AppBar(
        title: Text('News'),
      ),
      body: Column(
        children: [
          ElevatedButton(
            onPressed: () {
              fetchNewsAndCache(context);
            },
            child: Text('Fetch and Cache News'),
          ),
          if (newsCache != null)
            Expanded(
              child: ListView.builder(
                itemCount: newsCache.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(newsCache[index]),
                  );
                },
              ),
            )
        ],
      ),
    );
  }
}

这样，新闻数据在SharedPreferences中缓存，并且通过Riverpod在应用中管理，方便在不同页面获取和显示缓存的新闻数据。

结合使用的注意事项

  1. 数据类型限制：SharedPreferences只能存储有限的数据类型，如布尔值、整数、字符串、双精度浮点数和字符串列表。如果需要存储更复杂的数据结构，如自定义对象，需要先将其转换为上述支持的数据类型，例如将对象序列化为JSON字符串后存储。
  2. 异步操作：SharedPreferences的操作都是异步的，在使用时需要注意处理异步逻辑。例如，在获取数据后进行某些操作时，要确保数据已经成功获取。可以使用async/await或者Future.then来处理异步结果。
  3. 状态同步：当使用SharedPreferences和状态管理结合时，要注意状态的同步。例如，当状态管理中的状态发生变化时，要及时更新SharedPreferences中的数据，反之亦然。否则可能会出现数据不一致的情况。
  4. 性能考虑：虽然SharedPreferences是轻量级的，但频繁地读写操作可能会影响性能。特别是在存储大量数据或者在性能敏感的操作中，要谨慎使用。尽量批量处理数据的读写，而不是单个操作。

结论

Flutter的SharedPreferences和状态管理是构建强大、持久化应用的重要工具。通过合理地结合使用它们，可以轻松实现用户设置保存、登录状态管理、引导页控制和数据缓存等功能。在实际开发中，需要根据应用的需求和场景选择合适的状态管理方案，并注意处理好SharedPreferences的异步操作和数据类型限制等问题，以确保应用的稳定性和性能。随着应用的不断发展和功能的增加，良好的状态管理和持久化存储策略将为应用的可维护性和用户体验提供有力支持。