Flutter分页管理插件sig_pagination的使用

此Flutter插件通过集成signals包和pull_to_refresh_flutter3简化了分页管理。它提供了一个方便的PaginationScreen小部件来处理分页数据的获取、显示和刷新。

特性

• 简易集成分页数据获取。
• 支持下拉刷新和无限滚动。
• 可自定义UI组件用于加载、空状态和错误处理。
• 内置搜索功能。

开始使用

安装

在pubspec.yaml文件中添加sig_pagination依赖：

dependencies:
  sig_pagination: any

然后运行flutter pub get以获取该包。

使用方法

以下是一个使用PaginationScreen小部件的基本示例：

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

// 假设PlaneRequest类已经定义好，并且fetchPlanes方法已经实现
class PlaneRequest {
  static final PlaneRequest _instance = PlaneRequest._internal();
  factory PlaneRequest() => _instance;
  PlaneRequest._internal();

  Future<List<Map<String, dynamic>>> fetchPlanes({required Pagination pagination}) async {
    // 模拟异步请求数据
    await Future.delayed(Duration(seconds: 2));
    return List.generate(10, (index) => {"name": "Plane $index"});
  }
}

// 空状态屏幕
class EmptyScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(child: Text("No Data Available"));
  }
}

// 错误状态屏幕
class ErrorScreen extends StatelessWidget {
  final dynamic error;
  final dynamic signal;
  final dynamic trace;

  ErrorScreen({required this.error, required this.signal, required this.trace});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(child: Text("Error: $error"));
  }
}

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  [@override](/user/override)
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  Pagination pagination = Pagination();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: false,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('EXAMPLE')),
        body: PaginationScreen(
          pagination: pagination,
          future: () => PlaneRequest.instance.fetchPlanes(
            pagination: pagination,
          ),
          emptyWidget: const EmptyScreen(),
          loadingWidget: const CircularProgressIndicator(),
          errorWidget: (error, trace, signal) {
            return ErrorScreen(
              error: error,
              signal: signal,
              trace: trace,
            );
          },
          pageBuilder: (data) {
            return ListView.separated(
              padding: const EdgeInsets.only(top: 20),
              separatorBuilder: (context, index) => const Divider(),
              itemCount: data.length,
              itemBuilder: (context, index) {
                var item = data[index];
                return ListTile(
                  title: Text(item["name"]), // 显示数据
                );
              },
            );
          },
        ),
      ),
    );
  }
}