使用SizedBox固定TableRow高度时，如何对齐Flutter表格组件？

问题背景 #

在表单的TableRow里用Text和TextFormField收集用户数据，部分行会根据输入类型隐藏。为了避免底部“保存”按钮随行列显示/隐藏来回移动，用SizedBox固定了所有行高。之前靠Table的defaultVerticalAlignment: TableCellVerticalAlignment.middle能让Text和TextFormField完美垂直居中对齐，但加了SizedBox后对齐失效，单独设置TableCellVerticalAlignment也没用。

解决方法 #

方法1：给TableCell子组件嵌套带对齐的SizedBox #

不要直接给TableRow套SizedBox，而是给每个TableCell内部的Text/TextFormField包裹SizedBox，同时通过Align组件控制垂直居中。这样既能固定行高，又能保留组件的对齐效果：

TableCell(
  child: SizedBox(
    height: 56, // 自定义固定行高
    child: Align(
      alignment: Alignment.centerLeft, // 保持文本左对齐+垂直居中
      child: Text('用户名'),
    ),
  ),
),
TableCell(
  child: SizedBox(
    height: 56,
    child: Align(
      alignment: Alignment.centerLeft,
      child: TextFormField(
        decoration: InputDecoration(hintText: '请输入用户名'),
      ),
    ),
  ),
),

方法2：调整TextFormField的contentPadding #

如果不想嵌套太多组件，可以直接给TextFormField设置垂直方向的contentPadding，让输入框内的文本和左侧Text对齐：

TextFormField(
  decoration: InputDecoration(
    hintText: '请输入内容',
    contentPadding: EdgeInsets.symmetric(vertical: 16), // 根据实际行高调整这个值
  ),
)

关键原因说明 #

直接给TableRow加SizedBox会强制覆盖TableRow的尺寸，导致Table的defaultVerticalAlignment和TableCell的对齐属性失效。只有控制每个TableCell内部组件的布局对齐，才能让Text和TextFormField回到之前的居中状态。

完整示例代码 #

class FixedHeightForm extends StatelessWidget {
  const FixedHeightForm({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Table(
          columnWidths: const {0: FixedColumnWidth(120)},
          children: [
            TableRow(
              children: [
                TableCell(
                  child: SizedBox(
                    height: 60,
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: const Text('用户名', style: TextStyle(fontSize: 16)),
                    ),
                  ),
                ),
                TableCell(
                  child: SizedBox(
                    height: 60,
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: TextFormField(
                        style: const TextStyle(fontSize: 16),
                        decoration: const InputDecoration(
                          hintText: '请输入用户名',
                          border: OutlineInputBorder(),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
            TableRow(
              children: [
                TableCell(
                  child: SizedBox(
                    height: 60,
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: const Text('邮箱', style: TextStyle(fontSize: 16)),
                    ),
                  ),
                ),
                TableCell(
                  child: SizedBox(
                    height: 60,
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: TextFormField(
                        style: const TextStyle(fontSize: 16),
                        decoration: const InputDecoration(
                          hintText: '请输入邮箱',
                          border: OutlineInputBorder(),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
        const Spacer(),
        Padding(
          padding: const EdgeInsets.all(16.0),
          child: SizedBox(
            width: double.infinity,
            child: ElevatedButton(
              onPressed: () {},
              child: const Text('保存'),
            ),
          ),
        ),
      ],
    );
  }
}

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