Flutter中ListView.builder删除元素后UI未正确更新求助

问题现象 #

将包含数据的列表传入ListView.builder后，调用_removeFromList方法删除第二个元素时，数据已从内存列表中移除，但UI未实时更新：

• 原列表显示：
  • 323 mb（第一项）
  • 5.49 mb（第二项）
  • 405 mb（第三项）
• 删除第二项后，UI错误显示：
  • 323 mb（第一项）
  • 5.49 mb（第二项）
• 预期正确显示：
  • 323 mb（第一项）
  • 405 mb（第二项）
    重启应用后列表显示正常，但需要实现删除操作后的实时UI更新。

相关代码 #

List<Map<String, dynamic>> _myList = [{'size': 323}, {'size':4.49}, {'size': 405}];

void _saveList() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  List<String> myListString =
  _myList.map((item) => jsonEncode(item)).toList();
  prefs.setStringList('myList', myListString);
}

// 加载列表（原命名存在笔误）
void _loadownloadManagerist() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  List<String> myListString = prefs.getStringList('myList') ?? [];
  setState(() {
    _myList = myListString
        .map((item) => Map<String, dynamic>.from(jsonDecode(item)))
        .toList();
  });
}

// 从列表中移除元素
void _removeFromList(int item) {
  setState(() {
    _myList.removeAt(item);
    _saveList();
    _loadownloadManagerist();
  });
}

// ListView.builder部分
Expanded(
  child: ListView.builder(
    itemCount: _myList.length,
    itemBuilder: (context, index) {
      return DownloadingCardMain(
        UrlSize: _myList.isNotEmpty ? _myList[index]['urlSize'] : 0,
      );
    },
  ))

问题原因 #

1. 异步方法执行顺序混乱：_saveList和_loadownloadManagerist都是异步方法，在同一个setState中同步调用会导致_loadownloadManagerist可能在_saveList完成前就读取SharedPreferences，用旧数据覆盖已修改的内存列表。
2. 嵌套setState冲突：_loadownloadManagerist内部又调用了setState，内外层setState的执行顺序不可控，导致UI更新逻辑混乱。
3. 数据字段不匹配：内存列表的map键为size，但DownloadingCardMain中读取的是urlSize，存在字段名不匹配问题（可能是笔误）。

修复方案 #

1. 优化_removeFromList方法逻辑 #

删除元素后直接更新内存列表并触发UI刷新，保存操作放在setState外异步执行，无需立即重新加载：

void _removeFromList(int index) {
  setState(() {
    _myList.removeAt(index);
  });
  _saveList(); // 异步保存不影响UI实时更新
}

2. 修正方法命名错误 #

将_loadownloadManagerist改为_loadList，避免命名错误导致的逻辑异常：

void _loadList() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  List<String> myListString = prefs.getStringList('myList') ?? [];
  setState(() {
    _myList = myListString
        .map((item) => Map<String, dynamic>.from(jsonDecode(item)))
        .toList();
  });
}

3. 修正数据字段匹配 #

确保DownloadingCardMain读取正确的map键：

return DownloadingCardMain(
  UrlSize: _myList.isNotEmpty ? _myList[index]['size'] : 0,
);

4. 为列表项添加唯一Key（可选） #

如果DownloadingCardMain是复杂Widget，添加唯一Key帮助Flutter正确识别列表项变化：

return DownloadingCardMain(
  key: ValueKey(_myList[index]['size']), // 使用列表项的唯一值作为Key
  UrlSize: _myList.isNotEmpty ? _myList[index]['size'] : 0,
);

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