如何使用 PaginatedDataTable 更改列的背景颜色

Posted 2023-02-23

【中文标题】如何使用 PaginatedDataTable 更改列的背景颜色

【英文标题】：how to change the background color of column using PaginatedDataTable

【发布时间】：2021-11-28 03:53:34

【问题描述】：

我使用PaginatedDataTable 创建了一个表格，但现在我想添加列的背景颜色。 这是代码

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: Text("Col 1")),
              DataColumn(label: Text("Col 2")),
              DataColumn(label: Text("Col 3")),
              DataColumn(label: Text("Col 4")),
            ],
            source:dts,
            onRowsPerPageChanged: (r)
              setState(() 
                rowPerPage=r!;
              );
            ,
            rowsPerPage:rowPerPage
        
          ),
        ),
      ),
      
    );
  


class DTS extends DataTableSource

  DataRow getRow(int index)
    return DataRow.byIndex(index:index,cells: [
      DataCell(Text("#cell1$index")),
      DataCell(Text("#cell2$index")),
      DataCell(Text("#cell3$index")),
      DataCell(Text("#cell4$index"))
    ]);
  

  @override
  // TODO: implement isRowCountApproximate
  bool get isRowCountApproximate => true;

  @override
  // TODO: implement rowCount
  int get rowCount =>100;

  @override
  // TODO: implement selectedRowCount
  int get selectedRowCount => 0;

输出：

如果有人知道怎么做，请帮忙。

【参考方案1】：

试试下面的代码希望对你有帮助

如果你改变了整个表格的背景颜色，那么试试这个

 Theme(
            data: Theme.of(context).copyWith(
              cardColor: Colors.blue[100],
              dividerColor: Colors.white,
            ),
            child: PaginatedDataTable(),
          ),

您的结果屏幕->