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

概述

custom_data_table_2 是一个用于在 Flutter 中展示数据表格的插件。它提供了对标准 DataTable 和 PaginatedDataTable 的增强功能，例如固定表头、固定列、自定义滚动条等。

特性

• 固定表头和顶部行：通过设置 fixedTopRows 属性来实现。
• 固定左侧列：通过设置 fixedLeftColumns 属性来实现。
• 垂直滚动条：支持自动计算页面高度。
• 自定义列宽：可以通过 DataColumn2 来调整列宽。
• 异步数据源支持：支持从网络服务请求数据。

使用步骤

1. 添加依赖

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

dependencies:
  data_table_2: ^X.X.X

然后运行 flutter pub get。

2. 导入包

在 Dart 文件中导入 data_table_2 包：

import 'package:data_table_2/data_table_2.dart';

3. 示例代码

以下是一个简单的示例，展示如何使用 DataTable2：

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

/// 简单的 DataTable2 示例
class DataTable2SimpleDemo extends StatelessWidget {
  const DataTable2SimpleDemo();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16),
      child: DataTable2(
        columnSpacing: 12,
        horizontalMargin: 12,
        minWidth: 600,
        columns: [
          DataColumn2(
            label: Text('Column A'),
            size: ColumnSize.L,
          ),
          DataColumn(
            label: Text('Column B'),
          ),
          DataColumn(
            label: Text('Column C'),
          ),
          DataColumn(
            label: Text('Column D'),
          ),
          DataColumn(
            label: Text('Column NUMBERS'),
            numeric: true,
          ),
        ],
        rows: List<DataRow>.generate(
          100,
          (index) => DataRow(cells: [
            DataCell(Text('A' * (10 - index % 10))),
            DataCell(Text('B' * (10 - (index + 5) % 10))),
            DataCell(Text('C' * (15 - (index + 5) % 10))),
            DataCell(Text('D' * (15 - (index + 10) % 10))),
            DataCell(Text(((index + 0.1) * 25.4).toString()))
          ]),
        ),
      ),
    );
  }
}

4. 运行效果

运行上述代码后，您将看到一个带有固定表头的数据表格，如下图所示：

高级功能

固定表头和列

您可以使用 fixedTopRows 和 fixedLeftColumns 来固定表头和左侧列：

DataTable2(
  fixedTopRows: 1, // 固定顶部一行
  fixedLeftColumns: 1, // 固定左侧一列
  ...
)

自定义列宽

通过 DataColumn2 来调整列宽：

columns: [
  DataColumn2(
    label: Text('Column A'),
    size: ColumnSize.L, // 设置列宽为大号
  ),
  DataColumn(
    label: Text('Column B'),
  ),
]

异步数据源

使用 AsyncPaginatedDataTable2 来处理异步数据源：

class AsyncPaginatedDataTable2Demo extends StatefulWidget {
  [@override](/user/override)
  _AsyncPaginatedDataTable2DemoState createState() =>
      _AsyncPaginatedDataTable2DemoState();
}

class _AsyncPaginatedDataTable2DemoState
    extends State<AsyncPaginatedDataTable2Demo> {
  final PaginatorController paginatorController =
      PaginatorController(initialPageSize: 10);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return PaginatedDataTable2(
      source: MyAsyncDataSource(paginatorController),
      columns: [
        DataColumn(label: Text('Name')),
        DataColumn(label: Text('Age')),
      ],
      fixedTopRows: 1,
      fixedLeftColumns: 1,
      paginatorController: paginatorController,
    );
  }
}

class MyAsyncDataSource extends AsyncDataTableSource {
  final PaginatorController paginatorController;

  MyAsyncDataSource(this.paginatorController);

  [@override](/user/override)
  Future<List<DataRow>> getRows(int startIndex, int endIndex) async {
    // 模拟异步数据加载
    await Future.delayed(Duration(seconds: 1));
    return List.generate(endIndex - startIndex, (index) {
      return DataRow.byIndex(
        index: index,
        cells: [
          DataCell(Text('John Doe')),
          DataCell(Text('25')),
        ],
      );
    });
  }

  [@override](/user/override)
  Future<int> count() async {
    // 返回总行数
    return 100;
  }
}