從FutureFlutter中提取串列

我有一個未來，它會回傳一個 Future 回應。

class FutureInformation extends StatelessWidget {

  const FutureInformation({Key? key}) : super(key: key);

 Future<List<SliderDetails>> getSliderDetails() async {
    try {
      var response = await http.get((Uri.parse("/path/to/jsonFile.json")));
          if (response.statusCode == 200) {
            print(response.statusCode);
            var jsonData = json.decode(utf8.decode(response.bodyBytes));

      List<SliderDetails> listedFestivals = [];

      for (var map in jsonData) {

     SliderDetails allFestivals = SliderDetails(
     map['urlLink'] ?? "",
     map['name'] ?? "",
   );

  /// add them to the array
  listedFestivals.add(allFestivals);
  }
    return listedFestivals;
  }
  } catch (e){      
    print(e);
  }
      throw Exception('Nothing here, no food');
    }

我的 Json 檔案只有 2 個元素，兩個字串

[{
  "image": "https://i.gyazo.com/5d808c6e55a8b2151974bf53b35e21b6.png",
  "title": "Yellow Car"
},
  {
    "image": "https://i.gyazo.com/7f33e4e78a54d1c4795aec5e0d57fab1.png",
    "title": "Black Car"
  },
  {
    "image": "https://i.gyazo.com/5e399b0ac1ffca12165f51af8bc3e81a.png",
    "title": "Blue Car"
  },
  {
    "image": "https://i.gyazo.com/8c74b2ec4da1ba477afbc67111573c4d.png",
    "title": "Vintage Car"
  }

]

從回應中，我想創建 2 個不同的串列，類似于下面的示例。

final List<String> imgList = [
     "https://i.gyazo.com/5d808c6e55a8b2151974bf53b35e21b6.png",
      "https://i.gyazo.com/7f33e4e78a54d1c4795aec5e0d57fab1.png",
      "https://i.gyazo.com/5e399b0ac1ffca12165f51af8bc3e81a.png",
      "https://i.gyazo.com/8c74b2ec4da1ba477afbc67111573c4d.png",        

    ];

final List<String> titlesList = [
      "Yellow Car",
      "Black Car",
      "Blue Car",
      "Vintage Car",
      
    ];

我得到的回應是

Instance of 'Future<List<SliderDetails>>'

我想知道如何將未來分成兩個單獨的串列，感謝您的幫助。

這就是我如何稱呼未來

var datasource = const FutureInformation();

    getSliderDetailsEvents() async {
      List futureEvents = await datasource.getSliderDetails();
      return futureEvents ;
    }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

uj5u.com熱心網友回復：

首先將您的SliderDetails模型更改為：

class SliderDetails {
  final List<String> links;
  final List<String> names;
  SliderDetails({required this.links, required this.names});
}

然后將您的更改getSliderDetails為：

Future<SliderDetails> getSliderDetails() async {
    try {
      var response = await http.get((Uri.parse("/path/to/jsonFile.json")));
      if (response.statusCode == 200) {
        print(response.statusCode);
        var jsonData = json.decode(utf8.decode(response.bodyBytes));

        List<String> urlLinks = [];
        List<String> names = [];

        for (var map in jsonData) {
          urlLinks.add(map['urlLink'] ?? "");
          names.add(map['name'] ?? "");
        }
        return SliderDetails(
          links: urlLinks,
          names:names,
        );
      }
    } catch (e) {
      print(e);
    }
    throw Exception('Nothing here, no food');
  }

現在你可以像這樣使用它：

getSliderDetailsEvents() async {
  SliderDetails futureEvents = await datasource.getSliderDetails();
  
  print("links:${futureEvents.links}");
  print("links:${futureEvents.names}");
}

uj5u.com熱心網友回復：

現在您可以收到 a Future<List<SliderDetails>>，因為您現在正在等待您的Future方法的回應。

因此，您應該添加關鍵字await并async等待您的Future方法的回應。（在您的情況下，getSliderDetails 中可能缺少等待）。
這會給你一個List<SliderDetails>而不是一個Future<List<SliderDetails>>

將您的當前List<SliderDetails>分成兩個單獨的List 您可以使用多種方法來迭代您的串列并添加一些邏輯。

我建議map在List.

    final List<String> imageList = futureEvents.map((e) => e["image"]).toList();
    final List<String> titleList = futureEvents.map((e) => e["title"]).toList();

標籤：扑镖

上一篇：Flutter本地通知在最新版本中不起作用

下一篇：如何在FutureBuilder中呼叫2個回傳Future值的Future函式？