Flutter分页管理插件pagination_easy的使用

安装

在您的 pubspec.yaml 文件中添加 pagination_easy 作为依赖项，并运行 flutter pub get。

dependencies:
  pagination_easy: ^x.y.z

或者直接运行以下命令：

flutter pub add pagination_easy

使用

要使用此插件，首先导入必要的库：

import 'package:pagination_easy/pagination_controller.dart';
import 'package:pagination_easy/pagination_widget.dart';

接下来，初始化 PaginationController 并定义获取数据的方法：

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late PaginationController<Product> paginationController;

  [@override](/user/override)
  void initState() {
    super.initState();
    paginationController = PaginationController<Product>(
      fetchPage: (int pageKey) => getData(pageKey),
    );
  }

  Future<List<Product>> getData(int pageKey) async {
    // 模拟从服务器获取数据
    await Future.delayed(Duration(seconds: 2));

    // 假设每页返回的数据量为10
    final List<Product> data = List.generate(10, (index) => Product(id: index + pageKey * 10, name: "Product ${index + pageKey * 10}"));

    return data;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Pagination Easy Demo")),
      body: Column(
        children: [
          Expanded(
            child: SingleChildScrollView(
              controller: paginationController.scrollController,
              child: Padding(
                padding: EdgeInsets.all(16.0),
                child: PaginationWidget(
                  itemBuilder: (BuildContext context, Product item, int index) {
                    return ListTile(
                      title: Text(item.name),
                    );
                  },
                  controller: paginationController,
                  emptyWidget: const Center(child: Text("No Data Available")),
                  bottomLoader: Center(
                    child: CircularProgressIndicator(),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class Product {
  final int id;
  final String name;

  Product({required this.id, required this.name});
}

示例代码解释

1. 导入必要的库：

   import 'package:pagination_easy/pagination_controller.dart';
   import 'package:pagination_easy/pagination_widget.dart';
   

2. 初始化 PaginationController：

   late PaginationController<Product> paginationController;
   
   [@override](/user/override)
   void initState() {
     super.initState();
     paginationController = PaginationController<Product>(
       fetchPage: (int pageKey) => getData(pageKey),
     );
   }
   

3. 定义获取数据的方法：

   Future<List<Product>> getData(int pageKey) async {
     // 模拟从服务器获取数据
     await Future.delayed(Duration(seconds: 2));
   
     // 假设每页返回的数据量为10
     final List<Product> data = List.generate(10, (index) => Product(id: index + pageKey * 10, name: "Product ${index + pageKey * 10}"));
   
     return data;
   }
   

4. 构建页面：

   [@override](/user/override)
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(title: Text("Pagination Easy Demo")),
       body: Column(
         children: [
           Expanded(
             child: SingleChildScrollView(
               controller: paginationController.scrollController,
               child: Padding(
                 padding: EdgeInsets.all(16.0),
                 child: PaginationWidget(
                   itemBuilder: (BuildContext context, Product item, int index) {
                     return ListTile(
                       title: Text(item.name),
                     );
                   },
                   controller: paginationController,
                   emptyWidget: const Center(child: Text("No Data Available")),
                   bottomLoader: Center(
                     child: CircularProgressIndicator(),
                   ),
                 ),
               ),
             ),
           ),
         ],
       ),
     );
   }