Flutter中使用Table Widget实现表格表头（标题行）的方法

要给Table添加表头，只需在Table的children列表最前面插入一个自定义的表头TableRow即可，具体实现如下：

1. 定义表头行构建函数 #

先写一个生成表头行的函数，可给表头设置和数据行区分开的样式（比如加粗文本、背景色）：

TableRow _buildTableHeaderRow() {
  return TableRow(
    decoration: BoxDecoration(
      color: Colors.grey[200], // 表头背景色
    ),
    children: const [
      TableCell(
        child: Padding(
          padding: EdgeInsets.all(8.0),
          child: Text('ID', style: TextStyle(fontWeight: FontWeight.bold)),
        ),
      ),
      TableCell(
        child: Padding(
          padding: EdgeInsets.all(8.0),
          child: Text('姓名', style: TextStyle(fontWeight: FontWeight.bold)),
        ),
      ),
      TableCell(
        child: Padding(
          padding: EdgeInsets.all(8.0),
          child: Text('邮箱', style: TextStyle(fontWeight: FontWeight.bold)),
        ),
      ),
      TableCell(
        child: Padding(
          padding: EdgeInsets.all(8.0),
          child: Text('电话', style: TextStyle(fontWeight: FontWeight.bold)),
        ),
      ),
      // 需和数据行、columnWidths的列数一一对应，补充剩余列的表头文本
      TableCell(
        child: Padding(
          padding: EdgeInsets.all(8.0),
          child: Text('列5', style: TextStyle(fontWeight: FontWeight.bold)),
        ),
      ),
      TableCell(
        child: Padding(
          padding: EdgeInsets.all(8.0),
          child: Text('列6', style: TextStyle(fontWeight: FontWeight.bold)),
        ),
      ),
      TableCell(
        child: Padding(
          padding: EdgeInsets.all(8.0),
          child: Text('列7', style: TextStyle(fontWeight: FontWeight.bold)),
        ),
      ),
    ],
  );
}

2. 修改Table的children属性 #

把表头行和数据行合并成一个列表，替换原来的children值：

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: list.isEmpty
      ? Container(
          alignment: Alignment.center,
          child: CircularProgressIndicator())
      : Table(
          columnWidths: const <int, TableColumnWidth>{
            0: FixedColumnWidth(50),
            1: FixedColumnWidth(300),
            2: FixedColumnWidth(150),
            3: FixedColumnWidth(300),
            4: FixedColumnWidth(150),
            5: FixedColumnWidth(300),
            6: FixedColumnWidth(300),
          },
          // 合并表头行和数据行
          children: [
            _buildTableHeaderRow(),
            ...list.map((item) => _buildTableRow(item, context)).toList(),
          ],
        ),
)

3. 修正数据行函数（补全语法错误） #

你的_buildTableRow函数存在语法缺失，补全闭合括号并确保列数匹配：

TableRow _buildTableRow(UserModel item, context) {
  return TableRow(
    key: ValueKey(item.id),
    children: [
      TableCell(child: Padding(padding: EdgeInsets.all(8.0), child: Text(item.id.toString()))),
      TableCell(child: Padding(padding: EdgeInsets.all(8.0), child: Text(item.name))),
      TableCell(child: Padding(padding: EdgeInsets.all(8.0), child: Text(item.email))),
      TableCell(child: Padding(padding: EdgeInsets.all(8.0), child: Text(item.phone))),
      // 补充剩余列的内容，和表头列数保持一致
      TableCell(child: Padding(padding: EdgeInsets.all(8.0), child: Text(''))),
      TableCell(child: Padding(padding: EdgeInsets.all(8.0), child: Text(''))),
      TableCell(child: Padding(padding: EdgeInsets.all(8.0), child: Text(''))),
    ],
  );
}

注意事项 #

• 表头行的列数必须和数据行、columnWidths配置的列数完全匹配，否则会触发布局错误
• 可根据需求调整表头样式，比如修改背景色、字体大小、文本对齐方式等
• 如果你的tablecell是自定义封装函数，直接替换成对应的调用即可

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