Flutter如何设置DataTable的DataSource

在Flutter中使用DataTable时，如何正确设置DataSource？我尝试通过List生成数据，但表格无法正常显示。是否需要实现特定的回调方法？求一个完整的DataSource配置示例，包括数据绑定和更新逻辑。

2 回复

在Flutter中，为DataTable设置DataSource需使用DataTableSource类。创建自定义类继承DataTableSource，实现getRow、getRowCount和isRowCountApproximate方法。然后在DataTable的source属性中传入实例。

更多关于Flutter如何设置DataTable的DataSource的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，DataTable本身不直接使用DataSource，而是通过columns和rows属性来配置数据。但可以通过自定义数据管理类来实现类似DataSource的功能。以下是具体方法：

  1. 基础数据设置：
DataTable(
  columns: [
    DataColumn(label: Text('姓名')),
    DataColumn(label: Text('年龄')),
  ],
  rows: [
    DataRow(cells: [
      DataCell(Text('张三')),
      DataCell(Text('25')),
    ]),
    DataRow(cells: [
      DataCell(Text('李四')),
      DataCell(Text('30')),
    ]),
  ],
)
  1. 动态数据管理（类似DataSource）：
class MyDataTableSource {
  final List<Map<String, dynamic>> _data = [
    {'name': '张三', 'age': 25},
    {'name': '李四', 'age': 30},
  ];

  List<DataRow> getRows() {
    return _data.map((item) {
      return DataRow(cells: [
        DataCell(Text(item['name'])),
        DataCell(Text(item['age'].toString())),
      ]);
    }).toList();
  }
}

// 使用
DataTable(
  columns: [...],
  rows: MyDataTableSource().getRows(),
)
  1. 使用PaginatedDataTable（内置数据源）：
class MyDataSource extends DataTableSource {
  final List<Map<String, dynamic>> _data = [...];

  @override
  DataRow getRow(int index) {
    return DataRow(cells: [
      DataCell(Text(_data[index]['name'])),
      DataCell(Text(_data[index]['age'].toString())),
    ]);
  }

  @override
  bool get isRowCountApproximate => false;

  @override
  int get rowCount => _data.length;

  @override
  int get selectedRowCount => 0;
}

// 使用
PaginatedDataTable(
  header: Text('人员列表'),
  columns: [...],
  source: MyDataSource(),
)

关键点：

  • 普通DataTable直接操作rows数据
  • 需要分页/排序时建议使用PaginatedDataTable
  • 通过继承DataTableSource实现动态数据管理
  • 调用notifyListeners()可触发表格更新

选择方案取决于具体需求，简单展示用基础DataTable，复杂交互建议用PaginatedDataTable。

回到顶部