Flutter进阶组件（7）：DataTable（数据表格）

DataTable是一个用于展示数据的表格组件，它允许开发者以一种结构化和可滚动的方式展示数据集。DataTable非常适合展示详细信息，如表格数据、统计数据或配置选项。

一、创建基本的DataTable

以下是创建一个基本DataTable的示例：

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: DataTableExample(),
    );
  }
}

// 数据表格基本示例
class DataTableExample extends StatelessWidget {
  const DataTableExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('DataTable Example'),
      ),
      body: DataTable( // 数据表格
        columns: const <DataColumn>[ // 表头
          DataColumn(
            label: Text('Name'),
          ),
          DataColumn(
            label: Text('Age'),
          ),
          DataColumn(
            label: Text('Country'),
          ),
        ],

        rows: const <DataRow>[ // 内容行
          DataRow(cells: <DataCell>[
            DataCell(Text('John Doe')),
            DataCell(Text('21')),
            DataCell(Text('USA')),
          ]),

          DataRow(cells: <DataCell>[
            DataCell(Text('John Tom')),
            DataCell(Text('25')),
            DataCell(Text('UN')),
          ]),

          DataRow(cells: <DataCell>[
            DataCell(Text('John Jerry')),
            DataCell(Text('29')),
            DataCell(Text('HK')),
          ]),       

          // 更多的DataRow...
        ],

      ),
    );
  }
}

效果图如下所示：

二、DataTable属性

（1）DataTable参数

字段	类型
columns（表头）	List<DataColumn>
rows（内容行）	List<DataRow>
sortColumnIndex（排序列索引）	int
sortAscending（升序排序）	bool
onSelectAll（点击全选）	ValueSetter<bool>

（2）DataColumn参数

字段	类型
label（标签，文本或者size=18的图标）	Widget
tooltip（工具提示）	String
numeric（是否包含数字）	bool
onSort（排序时调用）	DataColumnSortCallback

（3）DataRow参数

字段	类型
selected（选中）	bool
onSelectChanged（点击选中改变）	ValueChanged<bool>
cells（子项）	List<DataCell>
index（索引DataRow.byIndex特有）	int

（4）DataCell参数

字段	类型
child（子部件,一般为Text或DropdownButton）	Widget
placeholder(是否为占位符，若child为Text，显示占位符文本样式)	bool
showEditIcon(显示编辑图标，并非意义上的把child变为可编辑，需要结合onTap)	bool
onTap（点击）	VoidCallback

三、DataRow和DataCell的使用

DataRow是DataTable中的行，它由DataCell组成：

DataRow(
  cells: <DataCell>[
    DataCell(Text('Jane Doe')),
    DataCell(Text('30')),
    DataCell(Text('Canada')),
  ],
)

DataCell是DataRow中的单元格，它可以包含任何 Widget：

DataCell(Text('35'))

四、DataTable排序功能

DataTable支持排序功能，你可以通过实现onSelectSortColumn回调来自定义排序逻辑：

DataTable(
  sortColumnIndex: _sortColumnIndex,
  sortAscending: _sortAscending,
  onSelectSortColumn: (int columnIndex, bool ascending) {
    setState(() {
      _sortColumnIndex = columnIndex;
      _sortAscending = ascending;
      // 实现排序逻辑
    });
  },
  // ...
)

五、实现单元格可点击

class DataTableExample extends StatefulWidget {
  const DataTableExample({super.key});
  @override
  State<DataTableExample> createState() => DataTableState();
}

// 数据表格示例
class DataTableState extends State<DataTableExample> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('DataTable Demo'), primary: true),
      body: DataTable( // 数据表格
        columns: const <DataColumn>[ // 表头
          DataColumn(
            label: Text('Name'),
          ),
          DataColumn(
            label: Text('Age'),
          ),
          DataColumn(
            label: Text('Country'),
          ),
        ],

        rows: const <DataRow>[ // 内容行
          DataRow(cells: <DataCell>[
            DataCell(Text('John Doe'), onTap: onTap),
            DataCell(Text('21'), onTap: onTap),
            DataCell(Text('USA'), onTap: onTap),
          ]),

          DataRow(cells: <DataCell>[
            DataCell(Text('John Tom'), onTap: onTap),
            DataCell(Text('25'), onTap: onTap),
            DataCell(Text('UN'), onTap: onTap),
          ]),

          DataRow(cells: <DataCell>[
            DataCell(Text('John Jerry'), onTap: onTap),
            DataCell(Text('29'), onTap: onTap),
            DataCell(Text('HK'), onTap: onTap),
          ]),       

          // 更多的DataRow...
        ],

      ));
  }
}

void onTap() {
  debugPrint('data onTap');
}

效果图如下所示，单元格现在可以点击：

六、自定义DataTable外观

你可以通过设置不同的属性来定制DataTable的外观：

DataTable(
  border: TableBorder.all(color: Colors.blueAccent), // 蓝色边框
  columnSpacing: 20.0,
  dataRowMinHeight: 48.0,
  headingRowHeight: 56.0,
  // ...
)

加了之后的效果图如下所示：

参考：

Flutter 中的 DataTable 小部件：全面指南_flutter datatable-CSDN博客

Flutter学习记录——12.表格组件_flutter 表格-CSDN博客