Flutter中调整TableRow尺寸及设置TextField的ID与背景色

一、让小时行与星期行高度一致 #

默认TextField自带内边距和最小高度，会强制撑大TableRow。通过以下两步即可解决：

1. 给所有TableRow设置统一的height属性，和星期行保持高度一致
2. 精简TextField的默认样式：移除边框、内边距，限制字体大小适配行高

二、为TextField设置标识（替代ID）和背景色 #

• 标识（ID）：Flutter无原生ID属性，可用Key区分不同输入框，推荐用ValueKey结合「星期+小时」的组合值，确保每个输入框标识唯一，方便后续定位
• 背景色：通过InputDecoration的fillColor配合filled: true直接设置，也可通过外层Container包裹实现

修改后的完整代码 #

List<TableRow> getFilas(Size size) {
  // 定义统一行高，与星期行匹配
  const double rowHeight = 40;
  List<TableRow> childs = [];
  
  // 星期行
  childs.add(const TableRow(
    height: rowHeight,
    children: [
      Text("Domingo", textAlign: TextAlign.center),
      Text("Sábado", textAlign: TextAlign.center),
      Text("Viernes", textAlign: TextAlign.center),
      Text("Jueves", textAlign: TextAlign.center),
      Text("Miércoles", textAlign: TextAlign.center),
      Text("Martes", textAlign: TextAlign.center),
      Text("Lunes", textAlign: TextAlign.center),
      Text(" ", textAlign: TextAlign.center),
    ],
  ));
  
  // 小时行
  for (int i = 7; i <= 22; i++) {
    childs.add(TableRow(
      height: rowHeight,
      children: [
        _buildTextField(day: "Domingo", hour: i),
        _buildTextField(day: "Sábado", hour: i),
        _buildTextField(day: "Viernes", hour: i),
        _buildTextField(day: "Jueves", hour: i),
        _buildTextField(day: "Miércoles", hour: i),
        _buildTextField(day: "Martes", hour: i),
        _buildTextField(day: "Lunes", hour: i),
        Text("${i.toString()}:00", textAlign: TextAlign.center),
      ],
    ));
  }
  return childs;
}

// 封装TextField，统一配置样式、标识和背景色
TextField _buildTextField({required String day, required int hour}) {
  return TextField(
    // 用ValueKey作为唯一标识
    key: ValueKey("${day}_${hour}h"),
    decoration: InputDecoration(
      border: InputBorder.none,
      fillColor: Colors.grey[100],
      filled: true,
      contentPadding: const EdgeInsets.symmetric(horizontal: 4),
    ),
    style: const TextStyle(fontSize: 12),
  );
}

额外说明 #

• 可根据需求调整rowHeight的值，实现更贴合的高度效果
• 若需获取特定输入框的内容，可通过Key查找对应Widget状态，复杂场景建议结合Provider或Riverpod做状态管理

内容的提问来源于stack exchange，提问作者Tatiana Sánchez