在 for 循环中不出现颤振元素

Question

我正在尝试为记录列表中的每个元素创建一个 UI 元素，但没有出现任何内容。我创建了一个类，要求提供名称、日期和描述，我为列表中的每个元素提供它们。

我在 for 循环之外制作的用于测试它是否会绘制任何东西的东西正在按预期显示。我也知道该列表确实包含它需要的元素。

列表中的元素从 Amplify DataStore 实例加载，并正确打印到调试控制台。

代码如下：

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

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

class _BuildRecordingsListState extends State<BuildRecordingsList> {
  List<Recording> recordings = DataStoreAppProvider().recordings;

  @override
  Widget build(BuildContext context) {
    DataStoreAppProvider().getRecordings();
    return Container(
      child: Column(
        children: [
          RecordingElement(
              recordingName: 'recordingName',
              recordingDate: TemporalDate.now(),
              recordingDescription: 'recordingDescription'),
          for (var rec in recordings)
            RecordingElement(
              recordingName: '${rec.name}',
              recordingDate: rec.date,
              recordingDescription: '${rec.description}',
            ),
        ],
      ),
    );
  }
}

我对 Flutter 和 Dart 还是很陌生，所以如果您需要更多信息，请告诉我 :)

Answer 1

你的 for 没有返回任何东西，也没有合适的地方从 for 中返回东西。

您应该检查 Iterable 方法：forEach、map 等...

在这种情况下，您必须使用 map 方法，该方法接受一个数组并在处理完每个元素后返回另一个数组。

[1, 2, 3].map((index) => index.toString()) // ["1", "2", "3"]

在这种情况下，您必须获取每个元素并返回一个使用您的值的 Widget。

...recordings.map((rec) {
  return RecordingElement(
    recordingName: '${rec.name}',
    recordingDate: rec.date,
    recordingDescription: '${rec.description}',
  );
})

当您的 Column 子级接受 List 作为值时，您必须解构您的元素。

破坏：

List firstList = [1, 2];

列表 secondList = [0, ...firstList]; // [0, 1, 2]

整个代码：

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

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

class _BuildRecordingsListState extends State<BuildRecordingsList> {
  List<Recording> recordings = DataStoreAppProvider().recordings;

  @override
  Widget build(BuildContext context) {
    DataStoreAppProvider().getRecordings();
    return Container(
      child: Column(
        children: [
          RecordingElement(
              recordingName: 'recordingName',
              recordingDate: TemporalDate.now(),
              recordingDescription: 'recordingDescription'),
          ...recordings.map((rec) {
            return RecordingElement(
            recordingName: '${rec.name}',
            recordingDate: rec.date,
            recordingDescription: '${rec.description}',
            );
          })
        ],
      ),
    );
  }
}