我有包含数据的列表视图。 我正在尝试更新无限滚动分页。但我无法添加。
我的列表视图
class ListData {
final int id;
final String emp_name;
final String age;
final String type;
final String joinDate;
ListData({
required this.id,
required this.emp_name,
required this.age,
required this.type,
required this.joinDate
});
static List<ListData> getList() => data.map(
(element) => ListData(
id: element['id'],
emp_name: element['emp_name'],
visa: element['age'],
type:element['type'],
expiryDate: element['joinDate'],
),
)
.toList();
}
此文件返回数据列表
但是所有数据都在眼前。需要为此添加分页。如何为此添加无限滚动分页。请任何人都可以提供您的知识
谢谢你
列表查看代码
class ListingData extends StatelessWidget {
final List<ListData> emp;
const ListingData({
Key? key,required this.emp,}) : super(key: key);
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: emp.length,
itemBuilder: (context, index) {
final empData = emp[index];
return ListTile(
title: Text('${empData.emp_name}'),
);
},
);
}
}
如何在此处添加分页参考了一些示例,但无法做到这一点。请提供一些意见,它可以拯救我的日子
谢谢你
我为您的问题创建了一个演示结构,希望能有所帮助
class PaginationDemo extends StatefulWidget {
const PaginationDemo({Key? key}) : super(key: key);
@override
_PaginationDemoState createState() => _PaginationDemoState();
}
class _PaginationDemoState extends State<PaginationDemo> {
final List<ListData> _rawListData = [ListData(), ListData(), ListData(), ListData()];
final List<ListData> paginatedListData = [];
bool isReachedMax = false;
int page = 0;
@override
initState() {
getListDataWithPagination();
super.initState();
}
void getListDataWithPagination() {
const int limit = 10;
final int startIndex = page * limit;
final int endIndex = startIndex + limit;
setState(
() {
final paginatedData = _rawListData.sublist(startIndex, endIndex);
if (paginatedData.isEmpty) {
isReachedMax = true;
} else {
paginatedListData.addAll(paginatedData);
page++;
}
},
);
}
@override
Widget build(BuildContext context) {
return NotificationListener<ScrollNotification>(
onNotification: (notification) {
if (notification.metrics.pixels == notification.metrics.maxScrollExtent) {
if (isReachedMax) return false;
getListDataWithPagination();
}
return false;
},
child: ListView.builder(
itemBuilder: (BuildContext context, int index) {
return index >= paginatedListData.length
? const Center(child: CircularProgressIndicator())
: ListTile(
title: Text('${paginatedListData[index].emp_name}'),
);
},
itemCount: isReachedMax ? paginatedListData.length : paginatedListData.length + 1,
),
);
}
}
如果我必须自己实现分页,我会使用 infinite_scroll_pagination 库(
ListView
、GridView
、PageView
支持),或者,如果项目很小,我只想将其放在一个地方而不需要不想添加另一个依赖项,我只需用 ListView
包裹我的 NotificationListener<ScrollNotification>
,如下所示:
NotificationListener<ScrollNotification>(
onNotification: (scrollNotification) {
if (scrollNotification is ScrollEndNotification) {
onScrollListener();
}
return true;
}
void onScrollListener() {
if (reachedEnd) {
return;
}
if (!isPageLoading) {
isPageLoading = true;
Future.microtask(() async {
final newItems = await getItemsUseCase.get(page: nextPage);
if (newItems.length < pageSize) {
reachedEnd= true;
} else {
nextPage++;
}
allItems.addAll(newItems);
isPageLoading = false;
});
}
}
我在这里添加了完整的代码示例。