在颤动中同时在同一个Listview中添加两个JSON对象答案

【问题标题】：adding two JSON objects in the same Listview simultaneously in flutter在颤动中同时在同一个Listview中添加两个JSON对象
【发布时间】：2022-01-07 09:43:30
【问题描述】：

我是新手，正在探索 Flutter，但遇到了很大的问题。也就是说，我一直在尝试在我的列表视图中添加两个 JSON 对象（一个具有文本数据，另一个具有音频数据）。

文本数据http://api.alquran.cloud/v1/quran/en.asad

音频数据http://api.alquran.cloud/v1/quran/ar.alafasy

终点http://api.alquran.cloud/v1/quran/{{edition}}

我想要的输出是 text - audio，下一行 text - audio 等等。

那么我该如何使用它呢？

[已编辑}

未来的建设者

FutureBuilder<TextModel>(
        future: futureText,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return Text(snapshot.data!.status);
          } else if (snapshot.hasError) {
            return Text('${snapshot.error}');
          }

          // By default, show a loading spinner.
          return const CircularProgressIndicator();
        },
      )

文字服务

Future<TextModel> getText() async{
    final url = "http://api.alquran.cloud/v1/quran/en.asad";
    Uri myUri = Uri.parse(url);
    final response = await http.get(myUri);
    final body = json.decode(response.body);

    if (response.statusCode == 200) {
      // If the server did return a 200 OK response,
      // then parse the JSON.
      return TextModel.fromJson(body);
    } else {
      // If the server did not return a 200 OK response,
      // then throw an exception.
      throw Exception('Failed to load text');
    }
  }

音频服务

Future<AudioModel> getAudio() async{
    final url = "http://api.alquran.cloud/v1/quran/ar.alafasy";
    Uri myUri = Uri.parse(url);
    final response = await http.get(myUri);
    final body = json.decode(response.body);

    if (response.statusCode == 200) {
      // If the server did return a 200 OK response,
      // then parse the JSON.
      return AudioModel.fromJson(body);
    } else {
      // If the server did not return a 200 OK response,
      // then throw an exception.
      throw Exception('Failed to load audio');
    }
  }

模型在https://app.quicktype.io/完成

【问题讨论】：

也请分享您的代码
我什么都没做，因为我还是一头雾水。
只需制作 2 个数据列表，一个用于文本，另一个用于音频，然后使用 ListView.builder 并在 itemCount 中分配它们中的任何一个，然后将相同的索引传递给两个列表
好的，我现在试试，会通知的。
当然，完成后通知我。

标签： json flutter

【解决方案1】：

您可以通过在同一个函数中调用两个 API 来尝试此操作

Future<List<Map<String, dynamic>>> getData() async {
    print("calling");
    const url = "http://api.alquran.cloud/v1/quran/ar.alafasy";
    Uri myUri = Uri.parse(url);
    final response = await http.get(myUri);
    final body = json.decode(response.body);

    const textUrl = "http://api.alquran.cloud/v1/quran/en.asad";
    Uri textUri = Uri.parse(textUrl);
    final textResponse = await http.get(textUri);
    final textBody = json.decode(textResponse.body);

    if (response.statusCode == 200 && textResponse.statusCode == 200) {
      // If the server did return a 200 OK response,
      // then parse the JSON.
      return [body, textBody];
    } else {
      // If the server did not return a 200 OK response,
      // then throw an exception.
      throw Exception('Failed to load audio');
    }
  }

和FutureBuilder 这样

FutureBuilder(
        future: getData(),
        builder: (context, AsyncSnapshot<List<Map<String, dynamic>>> snapshot) {
          if (snapshot.hasData) {
            return Column(
              children: [
                Text("${snapshot.data!}"),
                Text("${snapshot.data!}")
              ],
            );
          } else if (snapshot.hasError) {
            return Text('${snapshot.error}');
          } else {
            return const CircularProgressIndicator();
          }
        },
      )

根据需要修改 UI

【讨论】：