面试题：Flutter中如何基于SharedPreferences实现简单的数据监听并实时更新UI

Question

请描述在Flutter项目里，使用SharedPreferences监听数据变化并实时更新对应UI部分的具体步骤，同时给出关键代码示例。

Answer 1

1. 添加依赖： 在pubspec.yaml文件中添加shared_preferences依赖：

   dependencies:
     shared_preferences: ^2.0.15
   

   然后运行flutter pub get下载依赖。
2. 初始化并监听数据变化：
   • 在需要监听的页面或状态管理类中，引入shared_preferences库：

   import 'package:shared_preferences/shared_preferences.dart';
   

   • 创建一个SharedPreferences实例并读取初始值，同时设置监听。以下以StatefulWidget为例：

   class MyHomePage extends StatefulWidget {
     @override
     _MyHomePageState createState() => _MyHomePageState();
   }
   
   class _MyHomePageState extends State<MyHomePage> {
     late SharedPreferences prefs;
     String? value;
   
     @override
     void initState() {
       super.initState();
       _initSharedPreferences();
     }
   
     Future<void> _initSharedPreferences() async {
       prefs = await SharedPreferences.getInstance();
       setState(() {
         value = prefs.getString('key');
       });
       // 监听数据变化
       prefs.addListener(() {
         setState(() {
           value = prefs.getString('key');
         });
       });
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('SharedPreferences Listener'),
         ),
         body: Center(
           child: Text(value?? 'No value set'),
         ),
       );
     }
   
     @override
     void dispose() {
       prefs.removeListener(() {});
       super.dispose();
     }
   }
   

3. 更新数据： 在需要更新数据的地方，通过SharedPreferences实例更新数据，例如：

   Future<void> updateValue() async {
     await prefs.setString('key', 'new value');
   }
   

   此时，由于设置了监听，UI会自动更新显示新的值。

关键代码总结：

• 初始化和监听：

  prefs = await SharedPreferences.getInstance();
  setState(() {
    value = prefs.getString('key');
  });
  prefs.addListener(() {
    setState(() {
      value = prefs.getString('key');
    });
  });
  

• 更新数据：

  await prefs.setString('key', 'new value');
  

• 移除监听（在dispose方法中）：

  prefs.removeListener(() {});