Flutter列表视图需要更新无限滚动分页

问题描述 投票:0回答:2

我有包含数据的列表视图。 我正在尝试更新无限滚动分页。但我无法添加。

我的列表视图

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}'),
    
      );
    },
  );
 }
 }

如何在此处添加分页参考了一些示例,但无法做到这一点。请提供一些意见,它可以拯救我的日子

谢谢你

flutter flutter-dependencies flutter-web
2个回答
0
投票

我为您的问题创建了一个演示结构,希望能有所帮助


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,
      ),
    );
  }
}


0
投票

如果我必须自己实现分页,我会使用 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;
    });
  }
}

我在这里添加了完整的代码示例

© www.soinside.com 2019 - 2024. All rights reserved.