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

Question

我试图为记录列表中的每个元素制作一个ui元素，但没有出现任何内容。我已经做了一个类，它要求的名称，日期和描述，这是我在列表中的每个元素提供。

我在for循环之外做的那个，用来测试它是否会画出任何东西，是按预期显示的。我还知道列表确实包含了它需要的元素。

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

代码如下:

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}',
),
],
),
);
}
}

我仍然是很新的扑动和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 = [1,2];

List 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}',
);
})
],
),
);
}
}