Flutter问题：为何ExerciseList仅在保存数据后加载，initState加载无效？

问题原因 #

• loadData是异步方法，initState调用它时，Flutter会继续执行后续流程并先渲染UI，此时todaysExercises还是初始的空列表。
• 异步加载完成后，你更新了todaysExercises的内容，但没有通知Flutter框架状态发生变化，所以UI不会自动刷新。而调用saveData后，推测你在添加锻炼的操作中触发了setState()，才让UI重新渲染并显示数据。

解决方案 #

修改loadData方法，在数据加载完成后调用setState()，触发UI重建：

Future<void> loadData() async {
  final SharedPreferences prefs = await SharedPreferences.getInstance();
  final String? myDataString = prefs.getString('todaysExercises');
  if (myDataString != null) {
    final List<dynamic> myDataJson = jsonDecode(myDataString);
    setState(() {
      todaysExercises =
          myDataJson.map((dynamic item) => Exercise.fromMap(item)).toList();
    });
  }
}

额外提示 #

• 在StatefulWidget中，所有会影响UI的状态更新，都需要通过setState()来通知框架，这是Flutter更新UI的基础机制。
• 如果后续应用复杂度提升，可考虑使用Riverpod、Provider等状态管理库来更优雅地处理异步状态和跨组件数据共享，但当前场景用setState()就能解决问题。

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