dart 如何通过从API获取数据对列表进行分页?

n7taea2i  于 2023-06-19  发布在  其他
关注(0)|答案(1)|浏览(95)

我正在从API服务器获取数据。由于大量信息存储在服务器上,我不需要一次接收所有信息,而只需要根据请求接收。在limit parameter的帮助下,我设置了将接收的元素数量。我需要给一个列表分页。也就是说,如果向下滚动以加载10个项目,则只显示10个项目,依此类推。你能告诉我如何在我的代码中实现它吗?

仓库

Future<List<PublicChargingStationModel>> get(
      {int? limit}) async {
    try {
      final apiKeyMap = await ApiKey.getCryptoApiKeyMap();

      final Uri url = Uri.parse(
        '${ApiConfig.schema}://${ApiConfig.domain}/${ApiConfig.uriPrefix}/stations/?limit=$limit',
      ).replace(queryParameters: apiKeyMap);

      final response = await http.get(url, headers: headers);
      if (response.statusCode == 200) {
        final data = jsonDecode(response.body)['data'] as List;
        return data
            .map((json) => PublicChargingStationModel.fromJson(json))
            .toList();
      }

      return List<PublicChargingStationModel>.empty();
    } catch (_) {
      print(_);
      return List<PublicChargingStationModel>.empty();
    }
  }

列表

child: ListView.separated(
          separatorBuilder: ((context, index) => Padding(
                padding: const EdgeInsets.only(left: 44, top: 20, bottom: 14),
                child: Divider(
                  height: 0.5,
                  color: constants.Colors.white.withOpacity(0.20),
                ),
              )),
          physics: const BouncingScrollPhysics(),
          shrinkWrap: true,
          itemCount: widget.stationList!.length,
          itemBuilder: (context, index) => Row(
            children: [
              Expanded(
                flex: 3,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(widget.stationList![index].address,
                      style: constants.Styles.smallerHeavyTextStyleWhite,
                    ),
oxiaedzo

oxiaedzo1#

你可以用两种不同的方法来做,第一种方法是你可以创建自己的函数,在这里你可以根据屏幕像素来维护分页,你需要维护一个bool变量,根据这个变量来决定新页面是否会被加载。只需要在列表视图生成器中给予控制器。
第二种选择是使用infinite_scroll_pagination包,在这里你不需要维护任何变量或屏幕像素,只需要在pagination controller中添加页面请求监听器,但是你需要创建页面视图或不同的视图,你可以在其中传递列表视图,在pagecontroller属性中,你只需要传递paginationcontroller,就这样。其他所有的事情将由您的分页控制器管理。

相关问题