Flutter分页数据表插件easy_pagination_datatable的使用

在本教程中，我们将介绍如何使用 easy_pagination_datatable 插件来实现一个分页数据表。该插件基于 Flutter 的原生 PaginatedDataTable 组件，并扩展了一些新功能。

插件简介

easy_pagination_datatable 是一个强大的分页数据表组件，它允许开发者轻松实现分页、排序和异步加载大量数据的功能。以下是它的主要特点：

• 支持异步加载数据。
• 可以隐藏空白行。
• 提供自定义加载和错误提示组件。
• 正确显示数据大小和位置（例如：第 1 页，共 10 页，总计 100 条）。

新增功能

1. 不添加空行

通过设置 addEmptyRows: false，可以避免在数据不足时显示空白行。

addEmptyRows: false

2. 异步行加载支持

当数据源非常大时，传统的数据加载方式可能不可取。easy_pagination_datatable 提供了 getNextPage 方法，用于异步加载当前页面的数据。

3. 自定义加载和错误提示

可以通过 loadingWidget 和 errorWidget 属性设置自定义的加载和错误提示组件。

Web 演示

您可以访问以下链接查看在线演示，同时使用浏览器的开发者工具（F12）检查网络请求，观察数据是如何按需加载的。

Online Demo

示例代码

以下是一个完整的示例代码，展示如何使用 easy_pagination_datatable 实现分页数据表。

主文件 (main.dart)

import 'package:easy_pagination_datatable/easy_pagination_datatable.dart';
import 'package:flutter/material.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: MyHomePage(title: '分页数据表示例'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);
  final String? title;

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

class _MyHomePageState extends State<MyHomePage> {
  var rowsPerPage = EasyPaginatedDataTable.defaultRowsPerPage;
  final source = ExampleSource();

  DataRow? getRow(int index) {
    final currentRowData = source.lastDetails!.rows[index];
    return DataRow(cells: [
      DataCell(
        Text(currentRowData.index.toString()),
      ),
      DataCell(
        Text(currentRowData.value),
      ),
    ]);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: SingleChildScrollView(
        child: EasyPaginatedDataTable(
          getRow: getRow,
          addEmptyRows: false,
          source: source,
          showFirstLastButtons: true,
          rowsPerPage: rowsPerPage,
          availableRowsPerPage: [1, 5, 10, 50],
          onRowsPerPageChanged: (newRowsPerPage) {
            if (newRowsPerPage != null) {
              setState(() {
                rowsPerPage = newRowsPerPage;
              });
            }
          },
          columns: [
            DataColumn(label: Text('行号')),
            DataColumn(label: Text('值')),
          ],
        ),
      ),
    );
  }
}

class RowData {
  final int index;
  final String value;

  RowData(this.index, this.value);
}

class ExampleSource extends EasyPaginatedDataTableSource<RowData> {
  final data = List<RowData>.generate(
      13, (index) => RowData(index, '值 $index'));

  [@override](/user/override)
  int get selectedRowCount => 0;

  [@override](/user/override)
  Future<RemoteDataSourceDetails<RowData>> getNextPage(
      NextPageRequest pageRequest) async {
    return RemoteDataSourceDetails(
      data.length,
      data
          .skip(pageRequest.offset)
          .take(pageRequest.pageSize)
          .toList(),
    );
  }
}