Flutter分页下拉刷新插件refresh_paging_listview的使用

Flutter分页下拉刷新插件refresh_paging_listview的使用

介绍

本库在pull_to_refresh_flutter3基础上增加了分页加载、设置headers、footers和空页面的功能。刷新和加载更多的部分参考了flutter_pulltorefresh。

用法

首先，在pubspec.yaml文件中添加依赖：

dependencies:
  refresh_paging_listview: ^1.3.1

然后，导入包：

import 'package:refresh_paging_listview/refresh_paging_listview.dart';

接下来，我们创建一个分页列表示例：

class TaskPage extends BaseRefreshList {
  const TaskPage({super.key});

  @override
  State<TaskPage> createState() => _TaskPageState();
}

class _TaskPageState extends BaseRefreshListState<TaskEntity, TaskPage> {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return buildRefreshList(
        enableLoadMore: false,
        emptyConfig: EmptyConfig(
          text: "暂无数据，请稍后再试！",
          image: "images/ic_empty.png",
        ),
        headers: [
          ListHeaderItem(),
        ],
        footers: [
          ListFooterItem(),
        ],
        child: ListView.separated(
            itemBuilder: itemBuilder,
            itemCount: itemCount,
            separatorBuilder: (context, index) => const Divider(height: 1),
        ),
      );
  }
  
  @override
  Widget buildListItem(BuildContext context, TaskEntity item, int index) {
    return ListTile(
      title: Text("item: $index"),
    );
  }
  
  @override
  Future<List<TaskEntity>> loadData(int page) async {
    return Future.delayed(const Duration(seconds: 1), () {
      return [
        TaskEntity(),
        TaskEntity(),
        TaskEntity(),
        TaskEntity(),
        TaskEntity(),
      ];
    });
  }
}

最后，全局配置RefreshConfiguration：

RefreshConfiguration(
    // 分页接口初始页码
    initPage: 1,
    // 空数据时的空页面
    emptyBuilder: (config) => EmptyView(config: config),
    emptyConfig: EmptyConfig(
      text: "暂无数据，请稍后再试！",
      image: "images/ic_empty.png",
    ),
    headerBuilder: () => WaterDropHeader(),        // 配置默认头部指示器
    footerBuilder:  () => ClassicFooter(),         // 配置默认底部指示器
    headerTriggerDistance: 80.0,                   // 头部触发刷新的越界距离
    springDescription: SpringDescription(stiffness: 170, damping: 16, mass: 1.9), // 自定义回弹动画
    maxOverScrollExtent: 100,                      // 头部最大可以拖动的范围
    maxUnderScrollExtent: 0,                       // 底部最大可以拖动的范围
    enableScrollWhenRefreshCompleted: true,        // 允许刷新完成后滚动
    enableLoadingWhenFailed: true,                 // 加载失败后允许上拉加载更多
    hideFooterWhenNotFull: false,                  // 视口不满一屏时禁用上拉加载更多
    enableBallisticLoad: true,                     // 可以通过惯性滑动触发加载更多
    child: MaterialApp(
        title: "RefreshPagingListView",
        theme: ThemeData(),
        home: const TaskPage(),
        localizationsDelegates: const [
          RefreshLocalizations.delegate,
        ],
    ),
);

更多关于Flutter分页下拉刷新插件refresh_paging_listview的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter分页下拉刷新插件refresh_paging_listview的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter中使用refresh_paging_listview插件来实现分页下拉刷新的示例代码。这个插件结合了分页加载和下拉刷新功能，非常适合用于需要展示大量数据的场景。

首先，确保你的pubspec.yaml文件中已经添加了refresh_paging_listview依赖：

dependencies:
  flutter:
    sdk: flutter
  refresh_paging_listview: ^x.y.z  # 请替换为最新版本号

然后，运行flutter pub get来安装依赖。

接下来是一个完整的示例代码，展示了如何使用RefreshPagingListView：

import 'package:flutter/material.dart';
import 'package:refresh_paging_listview/refresh_paging_listview.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Refresh Paging ListView Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final PagingController<int, String> _pagingController = PagingController(
    firstPageKey: 0,
    pageSize: 10,
  );

  @override
  void dispose() {
    _pagingController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Refresh Paging ListView Demo'),
      ),
      body: RefreshPagingListView<int, String>(
        controller: _pagingController,
        onRefresh: _fetchData,
        onLoadMore: _fetchData,
        itemBuilder: (context, item, index) {
          return ListTile(
            title: Text('Item $item'),
          );
        },
      ),
    );
  }

  Future<void> _fetchData(int pageKey) async {
    // 模拟网络请求
    await Future.delayed(Duration(seconds: 1));

    List<String> data = List.generate(
      10, // 每页10条数据
      (index) => 'Data ${(pageKey * 10) + index + 1}',
    );

    // 添加数据到PagingController
    _pagingController.addPageItems(pageKey, data);
  }
}

代码解释：

  1. 依赖引入：在pubspec.yaml中添加refresh_paging_listview依赖。

  2. PagingController：创建一个PagingController实例，用于管理分页数据。firstPageKey是初始页码（通常从0开始），pageSize是每页显示的数据条数。

  3. RefreshPagingListView：使用RefreshPagingListView组件来展示分页数据。它接受一个PagingController，以及两个回调函数onRefresh和onLoadMore用于刷新和加载更多数据。

  4. 数据获取：_fetchData函数模拟了一个网络请求，延迟1秒后生成一些模拟数据，并通过_pagingController.addPageItems方法将数据添加到分页控制器中。

  5. Item Builder：itemBuilder回调函数用于构建列表项，这里简单地使用ListTile来显示数据。

  6. 资源释放：在dispose方法中释放PagingController资源，以避免内存泄漏。

这个示例展示了如何使用refresh_paging_listview插件来实现一个基本的分页下拉刷新功能。你可以根据自己的需求进一步自定义和扩展这个示例。

回到顶部