Flutter中for循环生成UI元素无显示，Amplify DataStore数据已加载

• 你的getRecordings()是Amplify DataStore的异步加载操作，首次执行build方法时，数据还没加载完成就已经完成了UI渲染，后续数据加载完成后没有触发当前组件的状态刷新，所以遍历的一直是初始的空列表
• State类里的recordings变量仅在初始化时赋值了一次Provider的列表，后续Provider内的列表更新后，当前State的变量不会自动同步，也不会触发UI重绘

将数据加载逻辑放到initState生命周期中，数据加载完成后调用setState触发UI刷新即可，修改后代码参考：

class BuildRecordingsList extends StatefulWidget {
  const BuildRecordingsList({Key? key}) : super(key: key);

  @override
  _BuildRecordingsListState createState() => _BuildRecordingsListState();
}

class _BuildRecordingsListState extends State<BuildRecordingsList> {
  List<Recording> recordings = [];

  @override
  void initState() {
    super.initState();
    loadRecordingData();
  }

  Future<void> loadRecordingData() async {
    // 等待异步加载完成
    await DataStoreAppProvider().getRecordings();
    // 更新状态触发UI重绘
    setState(() {
      recordings = DataStoreAppProvider().recordings;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      // 如果列表内容超出屏幕高度，建议将Container替换为SingleChildScrollView避免溢出报错
      child: Column(
        children: [
          RecordingElement(
              recordingName: 'recordingName',
              recordingDate: TemporalDate.now(),
              recordingDescription: 'recordingDescription'),
          // 可选：增加无数据占位提示，避免空白
          if (recordings.isEmpty)
            const Padding(
              padding: EdgeInsets.symmetric(vertical: 20),
              child: Text('正在加载录音数据...'),
            ),
          for (var rec in recordings)
            RecordingElement(
              recordingName: '${rec.name}',
              recordingDate: rec.date,
              recordingDescription: '${rec.description}',
            ),
        ],
      ),
    );
  }
}

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