Flutter如何在UI展示SharedPreferences最新列表避免重复加载

问题根因 #

• 每次调用加载方法时，没有清空_list中已有的旧数据，直接执行add操作追加新读取的联系人，多次点击Load按钮就会不断叠加重复内容
• 数据读取完成后没有调用setState()触发UI重绘，会导致列表刷新时机不可控
• 异常捕获逻辑为空，运行出错时无任何提示，不利于排查问题

修复步骤 #

1. 启动加载逻辑前，先调用_list.clear()清空列表旧缓存
2. 所有联系人数据读取完成后，调用setState()通知框架刷新UI
3. 补全异常捕获的日志输出，方便定位运行时问题

修改后的核心代码 #

仅需要调整loadSharedPrefs方法即可，其余代码无需改动：

loadSharedPrefs() async {
  try {
    print('in load shared pref-- getting keys ');
    final prefs = await SharedPreferences.getInstance();
    final keys = prefs.getKeys();
    // 加载前清空旧数据，从根源避免重复
    _list.clear();

    print('now load shared pref ');
    for (String key in keys) {
      ContactModel user = ContactModel.fromJson(await sharedPref.read(key));
      _list.add(user);
    }
    print('done load shared pref ');
    // 数据就绪后触发UI重绘
    setState(() {});
  }
  catch (e) {
    print('加载联系人数据失败: $e');
  }
}

额外优化建议 #

• 给ListView.builder的列表项配置唯一Key，避免大量数据重绘时出现状态错乱：

return ListTile(
  key: ValueKey(_list[position].phoneNumber), // 用手机号作为唯一标识
  leading: Icon(Icons.contacts),
  title: Text(_list[position].displayName.toString()),
  trailing: Icon(Icons.delete)
);

• 如果后续新增删除联系人功能，删除本地存储数据后同样需要先清空列表再重新加载，避免旧数据残留。

注意：如果需要进入页面自动加载数据，在initState中调用加载方法时也要走清空-加载-setState的完整逻辑，不要直接往列表里追加数据。

内容的提问来源于stack exchange，提问作者sjDev