Flutter中如何为PaginatedDataTable表头行设置单独颜色？

你之前用dataRowColor尝试修改表头颜色，但这个属性是用来控制数据行样式的，表头行需要用headingRowColor来配置，以下是具体解决方法：

方法一：全局主题配置 #

在MaterialApp的theme中配置DataTableThemeData，全局生效所有表格的表头样式：

import 'package:flutter/material.dart';
import 'dart:math';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        dataTableTheme: const DataTableThemeData(
          // 设置表头行背景色
          headingRowColor: MaterialStatePropertyAll(Color(0xFFE0F7FA)),
          // 可选：设置表头文字样式
          headingTextStyle: TextStyle(color: Colors.black87, fontWeight: FontWeight.bold),
          // 数据行保持透明或自定义颜色
          dataRowColor: MaterialStatePropertyAll(Colors.transparent),
        ),
      ),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final DataTableSource _data = MyData();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          const SizedBox(height: 10),
          PaginatedDataTable(
            source: _data,
            header: const Text('My Products'),
            columns: const [
              DataColumn(label: Text('ID')),
              DataColumn(label: Text('Name')),
              DataColumn(label: Text('Price'))
            ],
            columnSpacing: 100,
            horizontalMargin: 10,
            rowsPerPage: 5,
          ),
        ],
      ),
    );
  }
}

class MyData extends DataTableSource {
  final List<Map<String, dynamic>> _data = List.generate(
      200,
          (index) => {
        "id": index,
        "title": "Item $index",
        "price": Random().nextInt(10000)
      });

  @override
  bool get isRowCountApproximate => false;
  @override
  int get rowCount => _data.length;
  @override
  int get selectedRowCount => 0;
  @override
  DataRow getRow(int index) {
    return DataRow(cells: [
      DataCell(Text(_data[index]['id'].toString())),
      DataCell(Text(_data[index]["title"])),
      DataCell(Text(_data[index]["price"].toString())),
    ]);
  }
}

方法二：局部表格配置 #

如果只想给当前这个PaginatedDataTable单独设置表头样式，不影响全局，可以用Theme组件包裹表格，局部覆盖主题：

// 修改HomeScreen的build方法
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: [
        const SizedBox(height: 10),
        Theme(
          data: Theme.of(context).copyWith(
            dataTableTheme: const DataTableThemeData(
              headingRowColor: MaterialStatePropertyAll(Color(0xFFE0F7FA)),
            ),
          ),
          child: PaginatedDataTable(
            source: _data,
            header: const Text('My Products'),
            columns: const [
              DataColumn(label: Text('ID')),
              DataColumn(label: Text('Name')),
              DataColumn(label: Text('Price'))
            ],
            columnSpacing: 100,
            horizontalMargin: 10,
            rowsPerPage: 5,
          ),
        ),
      ],
    ),
  );
}

关键说明 #

• headingRowColor是专门控制表头行背景色的属性，用MaterialStatePropertyAll可以设置固定颜色，也可以用MaterialStateProperty.resolveWith根据不同状态（如hover、选中）设置动态颜色
• 你之前使用的dataRowColor仅对表格的数据行生效，所以表头不会有变化

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