我正在嘗試為錄音串列中的每個元素制作一個 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 還是很陌生，所以如果你需要更多資訊，請告訴我:)
uj5u.com熱心網友回復：
你的 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 作為值時，您必須解構您的元素。
破壞：
串列 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}',
);
})
],
),
);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/322703.html