Flutter中TextFormField文本无法居中问题求助

问题分析 #

从你的代码和截图来看，虽然已经设置了textAlign: TextAlign.center和textAlignVertical: TextAlignVertical.center，但文本仍未居中的核心原因有两个：

• 包裹TextFormField的容器默认左上角对齐，导致输入框整体在父容器内偏移
• 字体行高与contentPadding的组合设置，导致文本在输入框内部垂直方向偏移

问题截图：

解决方案 #

1. 让输入框在父容器内垂直居中

给包裹TextFormField的SizedBox(width:50)添加alignment: Alignment.center，确保输入框本身在容器内居中对齐：

SizedBox(
  width: 50,
  alignment: Alignment.center, // 新增该行
  child: TextFormField(
    // 原有代码保留
  ),
)

2. 调整文本行高与内容内边距

你使用的Satoshi字体默认行高可能导致文本偏移，同时contentPadding的设置需要匹配字体大小：

• 在TextStyle中添加height: 1.0，让行高与字体大小完全匹配
• 将contentPadding的垂直值调整为对称的小数值，避免文本被挤压：

style: const TextStyle(
  color: Colors.black,
  fontFamily: 'Satoshi',
  fontSize: 20,
  fontWeight: FontWeight.w500,
  height: 1.0, // 新增行高设置
),
decoration: const InputDecoration(
  hintText: "0",
  counterText: "",
  border: InputBorder.none,
  isCollapsed: true,
  contentPadding: EdgeInsets.symmetric(vertical: 2), // 调整垂直内边距
),

3. 简化布局层级（可选）

当前代码嵌套了多层SizedBox和Padding，可适当简化以减少对齐问题，比如将alignment: Alignment.center直接应用到最外层的SizedBox：

currentWeight.add(
  SizedBox(
    height: RepetitionsPadding.constHeight,
    alignment: Alignment.center, // 移到此处
    child: Padding(
      padding: const EdgeInsets.all(RepetitionsPadding.padding),
      child: SizedBox(
        width: 50,
        child: TextFormField(
          // 原有代码不变
        ),
      ),
    ),
  ),
);

调整后的完整代码 #

currentWeight.add(
  SizedBox(
    height: RepetitionsPadding.constHeight,
    child: Padding(
      padding: const EdgeInsets.all(RepetitionsPadding.padding),
      child: SizedBox(
        width: 50,
        alignment: Alignment.center,
        child: TextFormField(
          maxLength: 3,
          textAlign: TextAlign.center,
          textAlignVertical: TextAlignVertical.center,
          initialValue: reps.currentWeight.toString(),
          style: const TextStyle(
            color: Colors.black,
            fontFamily: 'Satoshi',
            fontSize: 20,
            fontWeight: FontWeight.w500,
            height: 1.0,
          ),
          onChanged: (value) => {reps.currentWeight = value},
          decoration: const InputDecoration(
            hintText: "0",
            counterText: "",
            border: InputBorder.none,
            isCollapsed: true,
            contentPadding: EdgeInsets.symmetric(vertical: 2),
          ),
        ),
      ),
    ),
  ),
);

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