Flutter自定义分页插件flutter_custom_pagination的使用

插件简介

flutter_custom_pagination 是一个用于帮助你在Flutter应用中实现数据分页的简单插件。它适用于Web和移动端，解决了Flutter内置分页表格的灵活性不足问题。该插件提供了两个主要组件：

• FlutterCustomPagination：用于显示分页控件。
• FlutterCustomPaginationOptions：用于显示每页显示条数的选择选项。

当前的样式基于Material Design，欢迎贡献代码以增强分页控件的外观和功能。

截图

使用方法

1. 添加依赖

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

dependencies:
  flutter_custom_pagination: ^0.2.0

2. 导入包

在你的Dart文件中导入 flutter_custom_pagination 包：

import 'package:flutter_custom_pagination/flutter_custom_pagination.dart';
import 'package:flutter_custom_pagination/flutter_custom_pagination_options.dart';

3. 完整示例代码

以下是一个完整的示例代码，展示了如何使用 flutter_custom_pagination 实现分页功能。这个示例从 jsonplaceholder.typicode.com API 获取数据，并根据用户选择的分页选项动态加载数据。

import 'package:flutter/material.dart';
import 'package:flutter_custom_pagination/flutter_custom_pagination.dart';
import 'package:flutter_custom_pagination/flutter_custom_pagination_options.dart';
import 'package:dio/dio.dart'; // 用于网络请求

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Custom Pagination Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Custom Pagination Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  final Dio dio = Dio(
    BaseOptions(
      baseUrl: 'https://jsonplaceholder.typicode.com',
      connectTimeout: const Duration(seconds: 15),
      receiveTimeout: const Duration(seconds: 15),
      headers: {
        "Accept": "application/json",
      },
    ),
  );

  int currentPage = 1;
  int pageLimit = 10;
  List<int> pageLimitOptions = [10, 25, 50];
  int totalDataCount = 100;
  dynamic sampleData = [];

  [@override](/user/override)
  void initState() {
    super.initState();
    _getSampleData();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      bottomNavigationBar: BottomAppBar(
        elevation: 3,
        padding: const EdgeInsets.all(10.0),
        child: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) =>
              MediaQuery.of(context).size.width >= 600
                  ? _renderLargeScreenPagination()
                  : _renderSmallScreenPagination(),
        ),
      ),
      body: SingleChildScrollView(
        child: sampleData.isEmpty
            ? const SizedBox(
                height: 300, child: Center(child: CircularProgressIndicator()))
            : Column(
                children: [
                  ListView.builder(
                    padding: const EdgeInsets.symmetric(vertical: 16),
                    physics: const NeverScrollableScrollPhysics(),
                    shrinkWrap: true,
                    itemCount: sampleData.length,
                    itemBuilder: (BuildContext context, int index) {
                      dynamic _data = sampleData[index];
                      return ListTile(
                        title: Text(
                          '${_data['title']}',
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: const TextStyle(fontWeight: FontWeight.bold),
                        ),
                        subtitle: Text(
                          '${_data['body']}',
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis,
                        ),
                      );
                    },
                  ),
                ],
              ),
      ),
    );
  }

  /// 渲染小屏幕分页（例如：手机屏幕）
  _renderSmallScreenPagination() {
    TextStyle? _textStyle = Theme.of(context).textTheme.labelMedium?.copyWith(
          color: Colors.brown,
          fontSize: 14,
        );

    return Wrap(
      alignment: WrapAlignment.center,
      children: [
        FlutterCustomPagination(
          currentPage: currentPage,
          limitPerPage: pageLimit,
          totalDataCount: totalDataCount,
          onPreviousPage: _onChangePage,
          onBackToFirstPage: _onChangePage,
          onNextPage: _onChangePage,
          onGoToLastPage: _onChangePage,
          backgroundColor: Theme.of(context).colorScheme.background,
          textStyle: _textStyle,
          previousPageIcon: Icons.keyboard_arrow_left,
          backToFirstPageIcon: Icons.first_page,
          nextPageIcon: Icons.keyboard_arrow_right,
          goToLastPageIcon: Icons.last_page,
        ),
        FlutterCustomPaginationOptions(
          limitPerPage: pageLimit,
          backgroundColor: Theme.of(context).colorScheme.background,
          textStyle: _textStyle,
          pageLimitOptions: pageLimitOptions,
          onPageLimitChanged: _onPageLimitChanged,
          text: 'items per page',
        ),
      ],
    );
  }

  /// 渲染大屏幕分页（例如：平板和桌面屏幕）
  _renderLargeScreenPagination() {
    TextStyle? _textStyle = Theme.of(context).textTheme.labelMedium?.copyWith(
          color: Colors.brown,
          fontSize: 14,
        );

    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        FlutterCustomPaginationOptions(
          limitPerPage: pageLimit,
          backgroundColor: Theme.of(context).colorScheme.background,
          textStyle: _textStyle,
          pageLimitOptions: pageLimitOptions,
          onPageLimitChanged: _onPageLimitChanged,
          text: 'items per page',
        ),
        FlutterCustomPagination(
          currentPage: currentPage,
          limitPerPage: pageLimit,
          totalDataCount: totalDataCount,
          onPreviousPage: _onChangePage,
          onBackToFirstPage: _onChangePage,
          onNextPage: _onChangePage,
          onGoToLastPage: _onChangePage,
          backgroundColor: Theme.of(context).colorScheme.background,
          textStyle: _textStyle,
          previousPageIcon: Icons.keyboard_arrow_left,
          backToFirstPageIcon: Icons.first_page,
          nextPageIcon: Icons.keyboard_arrow_right,
          goToLastPageIcon: Icons.last_page,
        ),
      ],
    );
  }

  /// 当分页选项改变时调用
  _onPageLimitChanged(int? limit) async {
    setState(() {
      currentPage = 1;
      pageLimit = limit ?? 15;
    });
    await _getSampleData();
  }

  /// 当页面改变时调用
  _onChangePage(int page) async {
    setState(() {
      currentPage = page;
    });
    await _getSampleData();
  }

  /// 获取示例数据
  _getSampleData() async {
    try {
      setState(() {
        sampleData = [];
      });
      final response =
          await dio.get('/posts?_page=$currentPage&_limit=$pageLimit');
      setState(() {
        sampleData = response.data;

        // 设置总数据量，如果需要
        // 示例API不提供总数据量信息，因此手动设置为100
        totalDataCount = 100;
      });
    } catch (e) {
      print(e);
    }
  }
}