将 API 中的数据作为新条目添加到 ListView

Question

我从 API productObject 获取数据并将它们显示在构建小部件中，如下所示：

  Widget build(BuildContext context) {
    if (_sharedText != null) {
      return Scaffold(
        appBar: AppBar(
          title: Text("Thank you"),
          backgroundColor: Colors.blueGrey.shade900,
        ),
        backgroundColor: Colors.blueGrey.shade400,
        body: Center(
          child: FutureBuilder<ProductInformationModel>(
              future: productObject(),
              builder: (BuildContext context, AsyncSnapshot<ProductInformationModel> snapshot) {
                if (snapshot.hasData) {
                  return
                    ListView.builder(
                        itemCount: 2, //just a number to display at least the result
                        itemBuilder: (BuildContext context, int index) {
                          return Container(
                            //height: 75,
                            child: Center(
                              child: midView(snapshot),
                            ),
                          );
                        }
                    );
                } else if (snapshot.hasError) {
                  return Container(child:
                  Text("${snapshot.error}"));
                } else {
                  return Container(
                    child: Center(child: CircularProgressIndicator(),),
                  );

到目前为止还可以，但我想要的是每次再次调用 API 时，当前显示的 API 输出将保持显示在屏幕上，并且新调用的 API 输出将在当前输出下方可见。 因此，每个 API 调用都应该是一个列表条目，而不会从 API 中删除以前的数据。

productObject 的一个例子：

  Future<ProductInformationModel> productObject({String urlName}) async {
    try {
      return new Network().getProductInformation(urlName: _sharedText);

    } catch (e) {
      print("Image not found: $e");
    }
  }

我这样调用 API：

if (response.statusCode == 200) {
      model (ProductInformationModel from product_information_model.dart
      print("image data: ${response.body}");
      return ProductInformationModel.fromJson(json.decode(response.body));
    }else {
      throw Exception("Error getting image info");
    }

Widget midView(AsyncSnapshot<ProductInformationModel> snapshot) {
  var productName = snapshot.data.objects[0].title;
  var productImage = snapshot.data.objects[0].images[0].url;
  var api_type = snapshot.data.request.api;
  var pageUrl_type = snapshot.data.request.pageUrl;
  Container midView = Container(
    child: Padding(
      padding: const EdgeInsets.all(14.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[Text("$productName, $productImage",
        style: TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 18,
          color: Colors.black87
        ),),

我想我需要setState()，但我在哪里设置它？ 我之前需要创建一个空列表吗？

非常感谢，我是新来的。

Answer 1

我可以看到一些问题，但如果不查看其余代码（midView Widget），我无法为您提供完整的解决方案。您的ListView.builder 具有固定的itemCount 或2，但随后您将整个快照传递给midView 小部件。我实际上预计快照的数据是一个列表，您将使用builder 提供的index 在列表中循环。这也意味着您将不会将itemCount 设置为固定值，而是将其设置为来自您的快照的列表的长度。以下代码假定您的快照是一个列表：

ListView.builder(
  itemCount: snapshot.data['objects'].length,
  itemBuilder: (BuildContext context, int index) {
    return Container(
      child: Center(
        child: midView(snapshot.data['objects'][index]),
      ),
    );
  }
);