Flutter数据表格展示插件easy_data_table的使用

Flutter数据表格展示插件easy_data_table的使用

easy_data_table 是一个简单且高效的在 Flutter 中使用数据表格的方式。

特性

• 简化数据表格：使用少量代码即可创建数据表格。
• 选择功能：通过复选框列启用行选择。
• 自定义外观：通过各种选项自定义外观。
• 分页功能：为大数据集实现分页。
• 排序功能：通过预定义的列进行排序。

开始使用

1. 添加依赖

将以下内容添加到你的 pubspec.yaml 文件中：

dependencies:
  flutter:
    sdk: flutter
  easy_data_table: ^最新版本号

然后运行 flutter pub get 来获取依赖包。

2. 导入库

在你的 Dart 代码中添加以下导入语句：

import 'package:easy_data_table/easy_data_table.dart';

使用方法

使用 easy_data_table 非常简单。只需创建一个包含数据的 EasyDataTable 小部件：

EasyDataTable<Person>(
  rowsPerPage: rowsPerPage,
  currentPage: page,
  selectedRows: selected,
  onSelectChanged: (value, item) {
    setState(() {
      if (value == true) {
        selected.add(item);
      } else {
        selected.remove(item);
      }
    });
  },
  columns: [
    EasyColumn(
      headerText: 'Name',
      cellText: (person, i) => person.name,
      sortable: true,
    ),
    EasyColumn(
      headerText: 'Age',
      cellText: (person, i) => person.age.toString(),
      sortable: true,
      sort: (a, b, ascending) {
        if (ascending) {
          return a.age.compareTo(b.age);
        } else {
          return b.age.compareTo(a.age);
        }
      },
    ),
    EasyColumn(
      headerText: 'Married',
      cellText: (person, i) => person.isMarried ? 'Yes' : 'No',
    ),
    EasyColumn(
      headerText: 'Height',
      cellText: (person, i) => person.height.toStringAsFixed(2),
    ),
    EasyColumn(headerText: 'City', cellText: (person, i) => person.city, textAlign: TextAlign.left),
  ],
  rows: persons,
  paginatorBuilder: (context) {
    return Container(
      alignment: Alignment.centerRight,
      child: EasyTablePagination(
        count: persons.length,
        rowsPerPage: rowsPerPage,
        page: page,
        onPageChange: (int value) => setState(() => (page = value)),
        onRowsPerPageChange: (value) => setState(() => (rowsPerPage = value)),
        rowsPerPageOptions: const [3, 10, 15, 30],
      ),
    );
  },
)

常见问题

Q: 如何自定义单元格的外观？

A: 可以使用 EasyColumn 的选项如 cellWidgetBuilder, textAlign, 和 width 来自定义单元格的外观。

支持与联系

• Email: omasuaku@gmail.com
• Github: oseeshogun

贡献

欢迎提出任何改进或添加的建议。如果你想要提交 PR，你随时可以这样做 :)

完整示例代码

以下是完整的示例代码：

import 'package:easy_data_table/easy_data_table.dart';
import 'package:example/person.dart';
import 'package:flutter/material.dart';

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

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

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

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> {
  List<Person> selected = [];
  int rowsPerPage = 3;
  int page = 1;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: ConstrainedBox(
          constraints: const BoxConstraints(maxWidth: 700),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Expanded(
                child: EasyDataTable<Person>(
                  rowsPerPage: rowsPerPage,
                  currentPage: page,
                  selectedRows: selected,
                  onSelectChanged: (value, item) {
                    setState(() {
                      if (value == true) {
                        selected.add(item);
                      } else {
                        selected.remove(item);
                      }
                    });
                  },
                  columns: [
                    EasyColumn(
                      headerText: 'Name',
                      cellText: (person, i) => person.name,
                      sortable: true,
                    ),
                    EasyColumn(
                      headerText: 'Age',
                      cellText: (person, i) => person.age.toString(),
                      sortable: true,
                      sort: (a, b, ascending) {
                        if (ascending) {
                          return a.age.compareTo(b.age);
                        } else {
                          return b.age.compareTo(a.age);
                        }
                      },
                    ),
                    EasyColumn(
                      headerText: 'Married',
                      cellText: (person, i) => person.isMarried ? 'Yes' : 'No',
                    ),
                    EasyColumn(
                      headerText: 'Height',
                      cellText: (person, i) => person.height.toStringAsFixed(2),
                    ),
                    EasyColumn(headerText: 'City', cellText: (person, i) => person.city, textAlign: TextAlign.left),
                  ],
                  rows: persons,
                  paginatorBuilder: (context) {
                    return Container(
                      alignment: Alignment.centerRight,
                      child: EasyTablePagination(
                        count: persons.length,
                        rowsPerPage: rowsPerPage,
                        page: page,
                        onPageChange: (int value) => setState(() => (page = value)),
                        onRowsPerPageChange: (value) => setState(() => (rowsPerPage = value)),
                        rowsPerPageOptions: const [3, 10, 15, 30],
                      ),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}