如何让PaginatedDataTable2仅为有数据的行显示边框

我用Flutter构建了基于PaginatedDataTable2的表格，代码如下：

Expanded(
    child: Theme(
        data: Theme.of(context).copyWith(
            cardColor: backgroundEndColor, dividerColor: Colors.white),
        child: PaginatedDataTable2(
          controller: paginatorController,
          hidePaginator: true,
          headingRowColor: MaterialStateColor.resolveWith(
            (states) {
              return Colors.white;
            },
          ),
          source: dataTable,
          header: const ListHeader(),
          columns: tableColumns,
          columnSpacing: 0,
          horizontalMargin: 10,
          rowsPerPage: projectPartProgressController.rowsPerPage.value,
          showCheckboxColumn: false,
        )),
  )

但最后一页出现了无数据却带有水平边框的空行，请问有没有办法移除这些无数据行的边框？

解决方法 #

方法一：自定义DataTableSource精准控制空行样式

在你的DataTableSource子类（即代码中的dataTable）里，重写getRow方法时判断行索引是否超出实际数据范围，返回无边框的空行：

@override
DataRow getRow(int index) {
  // 替换成你的实际数据列表
  final dataList = _yourDataList;
  
  // 处理空行
  if (index >= dataList.length) {
    return DataRow(
      color: MaterialStateProperty.all(Colors.transparent),
      cells: List.generate(
        tableColumns.length,
        (_) => const DataCell(
          SizedBox.shrink(),
          placeholder: true,
        ),
      ),
    );
  }
  
  // 正常数据行逻辑
  final item = dataList[index];
  return DataRow(
    cells: [
      DataCell(Text(item.title)),
      // 其他单元格内容
    ],
  );
}

通过placeholder: true可以让空单元格不显示边框，配合透明行背景，就能彻底隐藏空行的边框。

方法二：通过主题统一隐藏空行分隔线

如果不需要区分正常行和空行的分隔线，直接把主题里的分隔线颜色设为表格背景色，视觉上就看不到空行边框了：

Theme(
  data: Theme.of(context).copyWith(
    cardColor: backgroundEndColor,
    dividerColor: backgroundEndColor, // 分隔线颜色与背景色一致
  ),
  child: PaginatedDataTable2(
    // 原表格配置
  ),
)

这种方法简单直接，但会影响所有行的分隔线样式，适合对分隔线样式要求不高的场景。

内容的提问来源于stack exchange，提问作者user3863074