Flutter可扩展数据网格插件expansion_datagrid的使用

expansion_datagrid 是一个强大的 Flutter 插件，用于创建具有扩展功能的数据网格。它允许用户对数据进行排序、过滤、分组，并在扩展面板中显示更多详细信息。该插件还支持根据设备分辨率和大小隐藏或显示列，并且通过懒加载机制处理大量数据。此外，它支持主题定制，可以自定义头部、行等组件。

示例

以下是一个完整的示例代码，展示了如何使用 expansion_datagrid 创建一个带有扩展功能的数据网格。

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

// 测试数据
final testData = [
  {
    'name': 'ORG1',
    'since_date': '2021-08-02',
    'start_date': '2021-08-03',
    'end_date': '2021-08-04',
    'is_active': true
  },
  {
    'name': 'ORG2',
    'since_date': '2020-02-01',
    'start_date': '2021-08-04',
    'end_date': '2021-08-05',
    'is_active': false
  },
  // 更多测试数据...
];

// 定义表头
List<Header> getHeaders() => [
      Header('Name', 'name', 4),
      Header('Since', 'since_date', 2, width: 450, format: 'date'),
      Header('Start Date', 'start_date', 2, width: 800, format: 'date'),
      Header('End Date', 'end_date', 2, width: 800, format: 'date'),
      Header('Status', 'is_active', 2, width: 300, format: 'status'),
    ];

// 自定义数据网格
class TestDataGrid extends ExpansionDataGrid {
  final editFields = [
    FieldInfo('name', title: 'Name', required: true),
    FieldInfo('since_date', title: 'Since', format: 'date'),
    FieldInfo('start_date', title: 'Start Date', format: 'date'),
    FieldInfo('end_date', title: 'End Date', format: 'date'),
    FieldInfo('is_active', title: 'Status', format: 'status')
  ];

  TestDataGrid({Key? key}) : super(key: key);

  // 设置行对齐方式
  [@override](/user/override)
  Alignment getRowAlignment(Header header) =>
      (header.format == 'status') ? Alignment.center : Alignment.centerLeft;

  // 格式化行值
  [@override](/user/override)
  String getRowValue(dynamic val, RowItem rowItem, String? format) {
    switch (format) {
      case 'status':
        return val == true ? 'Active' : 'Inactive';
      default:
        return super.getRowValue(val, rowItem, format);
    }
  }

  // 自定义行组件
  [@override](/user/override)
  Widget getRowComponent(
      BuildContext context, dynamic val, RowItem rowItem, Header header) {
    if (header.dataField != 'name') {
      return super.getRowComponent(context, val, rowItem, header);
    }
    return MouseRegion(
      cursor: SystemMouseCursors.click,
      child: GestureDetector(
        onTap: () {},
        child: Text(getRowValue(val, rowItem, header.format),
            style: const TextStyle(
              color: Colors.blue,
              decoration: TextDecoration.underline,
            )),
      ),
    );
  }

  // 扩展行内容
  [@override](/user/override)
  Widget expandRow(BuildContext context, RowItem rowItem) {
    final data = [];
    for (var field in editFields) {
      data.add(rowItem.data[field.dataField]);
    }
    return createExpandPanel(context, editFields, data, rowItem,
        onDelete: (BuildContext context, RowItem rowItem) =>
            deleteRowItem(rowItem));
  }

  // 懒加载数据
  [@override](/user/override)
  Future<void> lazyLoad(void Function(List<dynamic>) callback) async {
    final items = [];
    final max = data.length + 10;
    await Future.delayed(const Duration(seconds: 2));
    for (int i = data.length + 1; i <= max; i++) {
      items.add({
        'name': 'ORG$i',
        'since_date': '2021-08-02',
        'start_date': '2021-08-03',
        'end_date': '2021-08-04',
        'is_active': true
      });
    }
    callback(items);
  }

  // 自定义最后的头部按钮
  [@override](/user/override)
  Widget getLastHeader(BuildContext context) {
    final theme = Theme.of(context);
    return Container(
      width: 56,
      height: theme.dataTableTheme.headingRowHeight ?? 32,
      color: ExpansionDataGrid.getHeadingRowColor(theme),
      child: IconButton(
          key: const ValueKey<String>('dt_header_add'),
          iconSize: 24,
          padding: const EdgeInsets.only(left: 16.0, right: 16.0),
          color: Theme.of(context).dataTableTheme.dataTextStyle?.color,
          onPressed: () {
            insertRow(RowItem({
              'name': 'Hello',
              'since_date': '01/01/2021',
              'start_date': '02/02/2021',
              'end_date': '03/03/2022',
              'is_active': true
            }));
          },
          icon: const Icon(Icons.add)),
    );
  }
}

// 主应用
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter DataGrid',
      theme: ThemeData(
          primarySwatch: Colors.blue,
          dataTableTheme: DataGridThemeData(
              headingAlignment: Alignment.centerLeft,
              headingRowColor: MaterialStateProperty.all(Colors.grey),
              headingTextStyle: const TextStyle(
                  color: Colors.black,
                  fontSize: 12,
                  fontWeight: FontWeight.bold),
              dataRowColor: MaterialStateProperty.all(const Color(0xFFFBFBFD)),
              dataTextStyle:
                  const TextStyle(color: Colors.black54, fontSize: 14),
              dividerThickness: 1,
              headingRowHeight: 50,
              decoration: const BoxDecoration(
                  color: Color(0xff3f5767),
                  border: Border(
                    bottom: BorderSide(color: Colors.black12),
                  )))),
      home: Scaffold(
        body: SafeArea(
          child: TestDataGrid().setHeaders(getHeaders()).setData(testData),
        ),
      ),
    );
  }
}

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