在for循环中不出现Flutter元素

Question

我正在尝试为录音列表中的每个元素创建一个 UI 元素，但什么也没有出现。我制作了一个 class，它要求我为列表中的每个元素提供名称、日期和描述。

我在 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 没有 return 任何东西，而且没有合适的地方来放置 for 的 return 东西。

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

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

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

在这种情况下，您必须获取每个元素和 return 使用您的值的 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}',
            );
          })
        ],
      ),
    );
  }
}

在for循环中不出现Flutter元素

Flutter element not appearing when in for loop

for-loop

dart

flutter

aws-amplify