如何在Flutter PaginatedDataTable中移除Card组件

当然可以移除PaginatedDataTable默认的Card组件，有两种常用方案，根据你的需求选择：

方案一：完全移除Card，自定义表格+分页控件 #

PaginatedDataTable的本质是DataTable加上内置分页逻辑，如果你想彻底摆脱Card包裹，可以拆分这两部分手动组合：

1. 自行管理分页状态（当前页码、总页数、数据切片逻辑）
2. 用DataTable展示当前页数据
3. 自定义分页按钮区域

示例代码：

// 分页状态变量
int _currentPage = 0;
final int _rowsPerPage = 10;
List<MyData> _allData = []; // 你的完整数据集

// 获取当前页的行数据
List<DataRow> _getCurrentPageRows() {
  final startIndex = _currentPage * _rowsPerPage;
  final endIndex = startIndex + _rowsPerPage;
  final currentPageData = _allData.sublist(
    startIndex,
    endIndex > _allData.length ? _allData.length : endIndex,
  );
  
  return currentPageData.map((data) => DataRow(
    cells: [
      DataCell(Text(data.id.toString())),
      DataCell(Text(data.name)),
    ],
  )).toList();
}

// 切换页码
void _changePage(int newPage) {
  setState(() {
    _currentPage = newPage;
  });
}

// 页面布局
@override
Widget build(BuildContext context) {
  final totalPages = (_allData.length / _rowsPerPage).ceil();
  
  return Column(
    children: [
      // 自定义头部（可选）
      const Padding(
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        child: Text('用户列表', style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600)),
      ),
      // 核心表格区域
      Expanded(
        child: DataTable(
          columns: const [
            DataColumn(label: Text('ID')),
            DataColumn(label: Text('名称')),
          ],
          rows: _getCurrentPageRows(),
        ),
      ),
      // 自定义分页控件
      Padding(
        padding: const EdgeInsets.all(16.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            TextButton(
              onPressed: _currentPage > 0 ? () => _changePage(_currentPage - 1) : null,
              child: const Text('上一页'),
            ),
            const SizedBox(width: 16),
            Text('第 ${_currentPage + 1} 页 / 共 $totalPages 页'),
            const SizedBox(width: 16),
            TextButton(
              onPressed: _currentPage < totalPages - 1 ? () => _changePage(_currentPage + 1) : null,
              child: const Text('下一页'),
            ),
          ],
        ),
      ),
    ],
  );
}

这种方式自由度最高，你可以完全控制表格的容器样式，比如直接放在页面背景上，或者用自己的容器包裹。

方案二：保留Card但移除视觉样式 #

如果不想自己处理分页逻辑，只是想去掉Card的阴影、边框等视觉效果，可以直接修改PaginatedDataTable的Card相关参数：

PaginatedDataTable(
  // 去掉Card阴影
  elevation: 0,
  // 让Card背景透明
  cardColor: Colors.transparent,
  // 去掉表格边框
  border: TableBorder.none,
  header: const Text('用户列表'),
  columns: const [
    DataColumn(label: Text('ID')),
    DataColumn(label: Text('名称')),
  ],
  source: _dataSource, // 原有的DataTableSource
)

这种方式更简单，不需要改动分页逻辑，只是把Card的视觉表现完全去掉，看起来就像没有Card一样。

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