如何通过从API获取数据的列表分页？
我正在从API服务器中获取数据。由于服务器上存储了大量信息，因此我不需要一次收到所有信息，而只需根据要求即可接收所有信息。在限制参数的帮助下，我设置了要收到的元素数量。我需要分页列表。也就是说，如果向下滚动以加载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();
}
}
list
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,
),
I am getting data from an API server. Since a large amount of information is stored on the server, I do not need to receive all the information at once, but only upon request. With the help of the limit parameter, I set the number of elements that I will receive. I need to paginate a list. That is, display only 10 items, if you scroll down to load 10 more items, and so on. Can you please tell me how to implement this in my code?
repository
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();
}
}
list
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,
),
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以以两种不同的方式进行操作，例如您可以创建自己的功能，在其中可以根据屏幕像素来维护分页，并且需要根据该函数维护一个Bool变量，以决定新页面是否负载。只是您需要在ListView Builder中提供控制器。
第二个选项是使用软件包 infinite_scroll_pagination 您无需维护任何varibale或screen screat将页面请求侦听器添加到分页控制器中在PageController属性中，您只需要通过PaginationController即可。其他所有内容将由您的分页控制器管理。
You can do in two different ways like in first way you can create your own function where you can maintain pagination based on your screen pixels and you need to maintain one bool variable based on that decide that new page will be load or not. Just you need to give controller in listview builder.
Second option is using package which is infinite_scroll_pagination where you don't need to maintain any varibale or screen pixels just add your page request listener in pagination controller but you need to create pageview or different view where you can pass your list view and in pagecontroller property you just need to pass paginationcontroller that's it. Other all the things will be managed by your pagination controller.