Flutter#2：我如何在 flutter 中實現這一點？

Question

我想通過在我的代碼中創建一個列表視圖來打印出一個“項目”列表

return Container(
  color: Palette.scienceBlue,
  child: Visibility(
    replacement: DevicePage(),
    visible: scanDeviceProvider.getVisible,
    child: Column(
      children: [
        const AppBarSideBarAndAddButton(),
        
        SizedBox(child: Container(
        // I need to print a list of "items" here
    )),
      ],
    ),
  ),
);

Future<void> onScan(dynamic data) async {
  var dataResponse = DataResponse.fromJson(data);
  print(dataResponse.toJson());
  List<dynamic> dt = jsonDecode(jsonEncode(dataResponse.data).toString());
  dt.forEach((element) {
    var item = Data.fromJson(element);

    print(item.model_Name);
  });
}

我嘗試使用listview.buider ，但出現了很多錯誤。 我有一個 function 來從 json 文件中獲取數據是 onScan，我想在這個 function 中讀取item.model_Name顯示在屏幕上怎么辦？

Answer 1

您應該更改onScan以返回Data列表。

Future<List<Data>> onScan(dynamic data) async {
  var dataResponse = DataResponse.fromJson(data);
  print(dataResponse.toJson());
  List<dynamic> dt = jsonDecode(jsonEncode(dataResponse.data).toString());
  return dt.map((element) => Data.fromJson(element)).toList();
}

有了這個，您可以使用FutureBuilder在您的 Listview 中顯示數據。

FutureBuilder<List<Data>>(
  future: onScan(data),
  builder: (BuildContext context, AsyncSnapshot<List<Data>> snapshot){
     if (snapshot.hasData) {
       final List<Data> scannedData = snapshot.data;
       return ListView(...)
     } else {
       ...
     }
  }
)

然后，您可以使用scannedData訪問您的項目。