如何在Flutter的PaginatedDataTable中设置列的背景色

实现逻辑 #

要给PaginatedDataTable设置列背景色，需要分别处理表头列和数据行对应列两个部分，分别对DataColumn的label组件、DataCell的内容组件加背景色即可，具体修改如下：

1. 表头列背景色设置 #

给DataColumn的label属性外层套Container，通过Container的color属性设置背景色，还可以搭配padding让样式更协调。

// 示例：给第一列表头设置浅蓝色背景
DataColumn(
  label: Container(
    width: double.infinity, // 撑满列宽
    color: Colors.lightBlue.shade100,
    padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 4),
    child: Text("Col 1"),
  ),
),

2. 数据行对应列背景色设置 #

同理，给对应位置的DataCell的子组件外层套Container设置背景色即可实现整列背景统一。

// 示例：给所有行的第一列设置和表头一致的浅蓝色背景
DataCell(
  Container(
    width: double.infinity,
    color: Colors.lightBlue.shade100,
    padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 4),
    child: Text("#cell1$index"),
  ),
),

完整修改后的代码 #

class _PaginationDataTableState extends State<PaginationDataTable> {
  var dts = DTS();
  int rowPerPage = PaginatedDataTable.defaultRowsPerPage;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.pink,
      body: SafeArea(
        child: SingleChildScrollView(
          child: PaginatedDataTable(
            arrowHeadColor: Colors.red,
            header: Text("Counter data"),
            columns: [
              // 第一列表头加浅蓝色背景
              DataColumn(
                label: Container(
                  width: double.infinity,
                  color: Colors.lightBlue.shade100,
                  padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 4),
                  child: Text("Col 1"),
                ),
              ),
              DataColumn(label: Text("Col 2")),
              DataColumn(label: Text("Col 3")),
              // 第四列表头加浅灰色背景
              DataColumn(
                label: Container(
                  width: double.infinity,
                  color: Colors.grey.shade200,
                  padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 4),
                  child: Text("Col 4"),
                ),
              ),
            ],
            source: dts,
            onRowsPerPageChanged: (r) {
              setState(() {
                rowPerPage = r!;
              });
            },
            rowsPerPage: rowPerPage,
          ),
        ),
      ),
    );
  }
}

class DTS extends DataTableSource {
  @override
  DataRow getRow(int index) {
    return DataRow.byIndex(index: index, cells: [
      // 第一列数据加浅蓝色背景，和表头对应
      DataCell(
        Container(
          width: double.infinity,
          color: Colors.lightBlue.shade100,
          padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 4),
          child: Text("#cell1$index"),
        ),
      ),
      DataCell(Text("#cell2$index")),
      DataCell(Text("#cell3$index")),
      // 第四列数据加浅灰色背景，和表头对应
      DataCell(
        Container(
          width: double.infinity,
          color: Colors.grey.shade200,
          padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 4),
          child: Text("#cell4$index"),
        ),
      ),
    ]);
  }

  @override
  bool get isRowCountApproximate => true;

  @override
  int get rowCount => 100;

  @override
  int get selectedRowCount => 0;
}

拓展提示 #

如果需要多列复用样式，可以封装通用的列内容组件，避免重复代码：

Widget buildColumnContent(String text, Color? bgColor) {
  return Container(
    width: double.infinity,
    color: bgColor,
    padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 4),
    child: Text(text),
  );
}

使用时直接调用即可：

DataColumn(label: buildColumnContent("Col 1", Colors.lightBlue.shade100))

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