如何在 Flutter 中使用嵌套(或多个)Future.builder?

2024-03-03

我对服务器有三个单独的 get 请求,我想在一个 Future.builder 中同时使用它们,但同时我创建了三个单独的 get-requests uding未来从这三个请求中获取数据。我还看到为了接收并行请求,我必须使用未来等待在 UI 线程内,但这给了我这个错误:

The element type 'Future<List<Result>>' can't be assigned to the list type 'Future<Result>'.

如果我需要同时获取三个并行请求来检索数据,如何解决这些错误?

我的未来:

   Future <List<Result>> fetchResult1(int mv_id) async {
      final url4 = 'http://linksecure/getRaceList.php?fmt=json&$mv_id';
      String username = '';
      String password = '';
      String basicAuth =
          'Basic ' + base64Encode(utf8.encode('$username:$password'));
      print(basicAuth);
      var response = await http.get(Uri.parse(url4), headers:<String, String>{'authorization': basicAuth});
      var jsonResponse = convert.jsonDecode(response.body) as List;
      return jsonResponse.map((e) => Result.fromJson(e)).toList();
    }
 Future <List<Result>> fetchResult2(int mv_id) async {
      final url4 = 'http://linksecure/getBooks.php?fmt=json&$mv_id';
      String username = '';
      String password = '';
      String basicAuth =
          'Basic ' + base64Encode(utf8.encode('$username:$password'));
      print(basicAuth);
      var response = await http.get(Uri.parse(url4), headers:<String, String>{'authorization': basicAuth});
      var jsonResponse = convert.jsonDecode(response.body) as List;
      return jsonResponse.map((e) => Result.fromJson(e)).toList();
    }
 Future <List<Result>> fetchResult3(int mv_id) async {
      final url4 = 'http://linksecure/getBookList.php?fmt=json&$mv_id';
      String username = '';
      String password = '';
      String basicAuth =
          'Basic ' + base64Encode(utf8.encode('$username:$password'));
      print(basicAuth);
      var response = await http.get(Uri.parse(url4), headers:<String, String>{'authorization': basicAuth});
      var jsonResponse = convert.jsonDecode(response.body) as List;
      return jsonResponse.map((e) => Result.fromJson(e)).toList();
    }

我的 Futurebuilder 内部 UI:

class Results extends StatelessWidget {
  final int mrId;

  const Results({Key key, this.mrId}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: FutureBuilder<List<Result>>(
            future:
                Future.wait([fetchResult1(0), fetchResult2(), fetchResult3()]),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.none &&
                  snapshot.hasData == null) {
                return Container();
              };
              return ListView.builder(
                  itemCount: snapshot.data.length,
                  itemBuilder: (context, index) {
                    Result project = snapshot.data[index];
                    return ListTile(
                      title: Text(project.rlLaststation),
                      subtitle: Text(project.rlLaststation),
                    );
                  });
            }));
  }
}

另外,我认为我需要将我的模型放在这里,因为我似乎在这里做错了什么,所以我的模型是:

List<Result> result1FromJson(String str) => List<Result>.from(json.decode(str).map((x) => Result.fromJson(x)));

String result1ToJson(List<Result> data) => json.encode(List<dynamic>.from(data.map((x) => x.toJson())));

    class Result {
      Result({
        this.rlId,
        this.mrId,
        this.rlRacetype,
        this.rlFirststationId,
        this.rlLaststationId,
        this.rlFirststation,
        this.rlFirststationEn,
        this.rlLaststation,
        this.rlLaststationEn,
        this.stopList,
      });
    
      String rlId;
      int mrId;
      String rlRacetype;
      String rlFirststationId;
      String rlLaststationId;
      String rlFirststation;
      String rlFirststationEn;
      String rlLaststation;
      String rlLaststationEn;
      List<StopList> stopList;
    
      factory Result.fromJson(Map<String, dynamic> json) => Result(
        rlId: json["rl_id"],
        mrId: json["mr_id"],
        rlRacetype: json["rl_racetype"],
        rlFirststationId: json["rl_firststation_id"],
        rlLaststationId: json["rl_laststation_id"],
        rlFirststation: json["rl_firststation"],
        rlFirststationEn: json["rl_firststation_en"],
        rlLaststation: json["rl_laststation"],
        rlLaststationEn: json["rl_laststation_en"],
        stopList: List<StopList>.from(json["stopList"].map((x) => StopList.fromJson(x))),
      );
    
      Map<String, dynamic> toJson() => {
        "rl_id": rlId,
        "mr_id": mrId,
        "rl_racetype": rlRacetype,
        "rl_firststation_id": rlFirststationId,
        "rl_laststation_id": rlLaststationId,
        "rl_firststation": rlFirststation,
        "rl_firststation_en": rlFirststationEn,
        "rl_laststation": rlLaststation,
        "rl_laststation_en": rlLaststationEn,
        "stopList": List<dynamic>.from(stopList.map((x) => x.toJson())),
      };
    }
    
    class StopList {
      StopList({
        this.rcOrderby,
        this.stId,
        this.stTitle,
        this.stTitleEn,
        this.rcKkp,
      });
    
      int rcOrderby;
      int stId;
      String stTitle;
      String stTitleEn;
      RcKkp rcKkp;
    
      factory StopList.fromJson(Map<String, dynamic> json) => StopList(
        rcOrderby: json["rc_orderby"],
        stId: json["st_id"],
        stTitle: json["st_title"],
        stTitleEn: json["st_title_en"],
        rcKkp: rcKkpValues.map[json["rc_kkp"]],
      );

编写另一个合并所有三个的函数

Future <List<Result>> fetchResults(int mv_id1, int mv_id2, int mv_id3) async {
    List<Result> results = [];
    final result1 = await fetchResult1(mv_id1);
    final result2 = await fetchResult2(mv_id2);
    final result3 = await fetchResult3(mv_id3);
    results.addAll(result1);
    results.addAll(result2);
    results.addAll(result3);
    return results;
}

然后用它作为future你的futureBuilder

FutureBuilder<List<Result>>(
    future: fetchResults(param1, param2, param3),
    ...
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Flutter 中使用嵌套(或多个)Future.builder? 的相关文章

随机推荐