Flutter无限滚动功能插件erb_infinite_scroll的使用

Flutter无限滚动功能插件erb_infinite_scroll的使用

erb_infinite_scroll 是一个基于 Riverpod 实现的无限滚动插件。它简化了 infinite_scroll_pagination 的使用过程，并通过 Riverpod 来管理状态。

安装插件

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

dependencies:
  erb_infinite_scroll: ^1.0.0  # 请替换为最新版本号

然后运行 flutter pub get 命令来获取依赖。

使用示例

下面是一个简单的示例，演示如何在 Flutter 应用中使用 erb_infinite_scroll 插件实现无限滚动功能。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: InfiniteScrollExample(),
    );
  }
}

class InfiniteScrollExample extends StatefulWidget {
  @override
  _InfiniteScrollExampleState createState() => _InfiniteScrollExampleState();
}

class _InfiniteScrollExampleState extends State<InfiniteScrollExample> {
  // 创建一个可监听的状态
  final PagingController<int, String> _pagingController = PagingController(firstPageKey: 1);

  @override
  void initState() {
    super.initState();
    // 添加数据源
    _pagingController.addPageRequestListener((pageKey) {
      Future.delayed(Duration(seconds: 1), () {
        // 模拟从服务器获取数据
        final isLastPage = pageKey > 5;  // 假设总共有5页数据
        if (isLastPage) {
          _pagingController.appendLastPage(["Data $pageKey"]);
        } else {
          final nextPageKey = pageKey + 1;
          final newItems = ["Data $nextPageKey"];
          _pagingController.appendPage(newItems, nextPageKey);
        }
      });
    });

    // 监听错误处理
    _pagingController.errorListener = (error) {
      print("Error: $error");
    };
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Infinite Scroll Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ErbInfiniteScroll(
          pagingController: _pagingController,
          itemBuilder: (context, item) => ListTile(
            title: Text(item),
          ),
        ),
      ),
    );
  }

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

代码解释

1. 创建PagingController：

   final PagingController<int, String> _pagingController = PagingController(firstPageKey: 1);
   

   这里我们创建了一个 PagingController，用于管理分页逻辑。

2. 添加页面请求监听器：

   _pagingController.addPageRequestListener((pageKey) {
     Future.delayed(Duration(seconds: 1), () {
       final isLastPage = pageKey > 5;  // 假设总共有5页数据
       if (isLastPage) {
         _pagingController.appendLastPage(["Data $pageKey"]);
       } else {
         final nextPageKey = pageKey + 1;
         final newItems = ["Data $nextPageKey"];
         _pagingController.appendPage(newItems, nextPageKey);
       }
     });
   });
   

   我们添加了一个监听器，每当需要加载新数据时，会调用该监听器。这里模拟了从服务器获取数据的过程。

3. 监听错误处理：

   _pagingController.errorListener = (error) {
     print("Error: $error");
   };
   

   我们添加了一个错误处理监听器，以便在出现错误时进行相应的处理。

4. 构建UI：

   return Scaffold(
     appBar: AppBar(
       title: Text('Infinite Scroll Example'),
     ),
     body: Padding(
       padding: const EdgeInsets.all(8.0),
       child: ErbInfiniteScroll(
         pagingController: _pagingController,
         itemBuilder: (context, item) => ListTile(
           title: Text(item),
         ),
       ),
     ),
   );