[英]How to make pagination in case items as horizontal Scrolling not vertical listview builder in flutter?
I have horizontal listview builder so how to make pagination to load more data in case items for horizontal listview !我有水平列表视图构建器,因此如何进行分页以加载更多数据以防水平列表视图项目!
You can copy paste run full code below您可以在下面复制粘贴运行完整代码
You can use package https://pub.dev/packages/flutter_pagewise您可以使用 package https://pub.dev/packages/flutter_pagewise
code snippet代码片段
return PagewiseListView(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
pageSize: PAGE_SIZE,
itemBuilder: this._itemBuilder,
pageFuture: (pageIndex) =>
BackendService.getPosts(pageIndex * PAGE_SIZE, PAGE_SIZE));
working demo工作演示
full code完整代码
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_pagewise/flutter_pagewise.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
class PagewiseListViewExample extends StatelessWidget {
static const int PAGE_SIZE = 5;
@override
Widget build(BuildContext context) {
return PagewiseListView(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
pageSize: PAGE_SIZE,
itemBuilder: this._itemBuilder,
pageFuture: (pageIndex) =>
BackendService.getPosts(pageIndex * PAGE_SIZE, PAGE_SIZE));
}
Widget _itemBuilder(context, PostModel entry, _) {
return Container(
width: 200,
child: ListTile(
leading: Icon(
Icons.person,
color: Colors.brown[200],
),
title: Text(entry.title),
//subtitle: Text(entry.body),
),
);
}
}
class BackendService {
static Future<List<PostModel>> getPosts(offset, limit) async {
final responseBody = (await http.get(
'http://jsonplaceholder.typicode.com/posts?_start=$offset&_limit=$limit'))
.body;
// The response body is an array of items
return PostModel.fromJsonList(json.decode(responseBody));
}
static Future<List<ImageModel>> getImages(offset, limit) async {
final responseBody = (await http.get(
'http://jsonplaceholder.typicode.com/photos?_start=$offset&_limit=$limit'))
.body;
// The response body is an array of items.
return ImageModel.fromJsonList(json.decode(responseBody));
}
}
class PostModel {
String title;
String body;
PostModel.fromJson(obj) {
this.title = obj['title'];
this.body = obj['body'];
}
static List<PostModel> fromJsonList(jsonList) {
return jsonList.map<PostModel>((obj) => PostModel.fromJson(obj)).toList();
}
}
class ImageModel {
String title;
String id;
String thumbnailUrl;
ImageModel.fromJson(obj) {
this.title = obj['title'];
this.id = obj['id'].toString();
this.thumbnailUrl = obj['thumbnailUrl'];
}
static List<ImageModel> fromJsonList(jsonList) {
return jsonList.map<ImageModel>((obj) => ImageModel.fromJson(obj)).toList();
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(height: 200, child: PagewiseListViewExample()),
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.