Flutter分页管理插件angel3_paginate的使用

Flutter分页管理插件angel3_paginate的使用

简介

Angel3 Paginate 是一个与平台无关的分页库，支持自定义的 Angel3 框架。它可以帮助开发者高效地实现分页功能，并且提供了丰富的 API 用于处理分页数据。

安装

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

dependencies:
  angel3_paginate: ^6.0.0

使用方法

angel3_paginate 提供了一个 Paginator<T> 类，可以用于生成 PaginationResult<T> 实例。分页结果在序列化为 JSON 时如下所示：

{
  "total" : 75,
  "items_per_page" : 10,
  "previous_page" : 3,
  "current_page" : 4,
  "next_page" : 5,
  "start_index" : 30,
  "end_index" : 39,
  "data" : ["<items...>"]
}

PaginationResult<T> 可以通过 fromMap 构造函数从 Map 中解析，也可以通过 toJson() 方法序列化为 JSON。

创建分页器

以下是一个简单的示例，展示了如何创建和使用 Paginator：

import 'package:angel3_paginate/angel3_paginate.dart';

void main() {
  // 创建一个包含数据的可迭代对象
  var iterable = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];

  // 创建分页器，默认每页显示 10 项
  var p = Paginator(iterable, itemsPerPage: 10);

  // 获取当前页面（默认是第一页）
  var page = p.current!;
  print('总项数: ${page.total}');
  print('起始索引: ${page.startIndex}');
  print('结束索引: ${page.endIndex}');
  print('当前页数据: ${page.data}');

  // 跳转到下一页
  p.next();
  page = p.current!;
  print('当前页: ${page.currentPage}');
  print('当前页数据: ${page.data}');

  // 返回上一页
  p.back();
  page = p.current!;
  print('当前页: ${page.currentPage}');
  print('当前页数据: ${page.data}');

  // 跳转到指定页面（例如第 2 页）
  p.goToPage(2);
  page = p.current!;
  print('当前页: ${page.currentPage}');
  print('当前页数据: ${page.data}');
}

分页器缓存

Paginator 默认会缓存分页结果，以提高性能。这对于需要快速响应的客户端应用（如搜索页面）非常有帮助。

完整示例 Demo

下面是一个完整的 Flutter 示例，展示了如何在 Flutter 应用中使用 angel3_paginate 实现分页功能：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 分页示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PaginatedListScreen(),
    );
  }
}

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

class _PaginatedListScreenState extends State<PaginatedListScreen> {
  late Paginator<int> paginator;
  int currentPage = 1;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化分页器，假设我们有 100 个数据项
    List<int> data = List.generate(100, (index) => index + 1);
    paginator = Paginator(data, itemsPerPage: 10);
  }

  void _goToPage(int page) {
    setState(() {
      currentPage = page;
      paginator.goToPage(page);
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    var page = paginator.current!;

    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter 分页示例'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: page.data.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text('Item ${page.data[index]}'),
                );
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                ElevatedButton(
                  onPressed: page.hasPrevious ? () => _goToPage(page.previousPage!) : null,
                  child: Text('上一页'),
                ),
                Text('第 ${currentPage} 页 / 共 ${paginator.totalPages} 页'),
                ElevatedButton(
                  onPressed: page.hasNext ? () => _goToPage(page.nextPage!) : null,
                  child: Text('下一页'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}