Flutter分页插件andomie_pagination的使用

功能介绍

Pagination 类为 Flutter 应用程序提供了分页状态管理和数据检索的功能。它支持按滚动加载数据，处理滚动事件，并在有新数据可用时通知用户。通过预加载和错误处理等功能，简化了分页列表或网格的实现。

特性

• 按滚动分页加载数据。

使用方法

短示例

以下是一个简单的使用示例：

import 'package:andomie_pagination/pagination.dart';

void main() {
  final pagination = Pagination<int>.init('example');
  pagination.paginate(
    controller: ScrollController(), // 提供一个 ScrollController
    callback: (config) async {
      // 数据获取逻辑
      return PaginationResponse.value(result: [1, 2, 3], snapshot: 1);
    },
    notifier: (value) {
      // 处理获取到的数据
      print(value);
    },
  );
}

长示例

以下是一个完整的长示例，展示如何在 Flutter 应用中集成分页功能：

初始化分页实例

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:andomie_pagination/pagination.dart';

const kNumbersPagination = "numbers";

void main() {
  // 初始化分页实例
  Pagination.init<String>(
    kNumbersPagination,
    initialSize: 5, // 初始加载的数据条数
    fetchingSize: 5, // 每次加载的新数据条数
    limit: 1000, // 最大数据量限制
    preload: 1000, // 预加载的数据量
  );
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 分页',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

定义分页逻辑

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _scrollController = ScrollController();

  Future<PaginationResponse<String>> loadData(PaginationConfig config) {
    return Future.delayed(const Duration(seconds: 2)).then((_) {
      final page = config.snapshotAsPage;
      final fetchingSize = config.fetchingSize;
      final items = List.generate(fetchingSize, (i) {
        final number =
            Pagination.realIndexOf<String>(kNumbersPagination, i) + 1;
        return "Item number is $number";
      });
      return PaginationResponse.value(result: items, snapshot: page + 1);
    });
  }

  [@override](/user/override)
  void initState() {
    super.initState();
    // 将分页逻辑应用到 ScrollController
    Pagination.apply<String>(
      kNumbersPagination,
      controller: _scrollController,
      callback: loadData,
      notifier: (data) {
        log('新数据加载: $data');
        setState(() {});
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xfff1f1f1),
      appBar: AppBar(
        title: const Text(
          "FLUTTER 分页",
          style: TextStyle(
            fontWeight: FontWeight.bold,
          ),
        ),
        centerTitle: true,
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () => Pagination.reloadOf<String>(kNumbersPagination),
        backgroundColor: Theme.of(context).primaryColor,
        label: const Text(
          "重新加载",
          style: TextStyle(
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        ),
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
      ),
      body: ListView.builder(
        padding: const EdgeInsets.symmetric(vertical: 16),
        controller: _scrollController,
        itemCount: Pagination.itemCountOf<String>(kNumbersPagination),
        itemBuilder: (context, index) {
          final item = Pagination.itemOf<String>(kNumbersPagination, index);
          if (item.isPlaceholder) {
            return const NumberItemPlaceholder();
          } else {
            return NumberItem(item: item.data!);
          }
        },
      ),
    );
  }
}

自定义分页项

class NumberItem extends StatelessWidget {
  final String item;

  const NumberItem({
    super.key,
    required this.item,
  });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(20),
      ),
      alignment: Alignment.center,
      child: Text(
        item,
        style: const TextStyle(
          color: Colors.black,
          fontWeight: FontWeight.bold,
          fontSize: 24,
        ),
      ),
    );
  }
}

class NumberItemPlaceholder extends StatelessWidget {
  const NumberItemPlaceholder({
    super.key,
  });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(20),
      ),
      alignment: Alignment.center,
      child: const CircularProgressIndicator(),
    );
  }
}