Flutter TextField文本溢出边框及Row对齐异常问题求助

你代码里的几个关键错误： #

• 文本垂直对齐设置错误：textAlignVertical: TextAlignVertical.bottom会强制文本贴紧TextField底部，直接导致文本位置偏移，和边框无法居中对齐。
• 内外尺寸与内边距冲突：外层SizedBox设置了height:40，但TextField的InputDecoration默认带有上下内边距，再加上maxLength默认显示的长度计数器，会挤压文本的显示空间，造成文本溢出边框。
• 未处理长度计数器：开启maxLength:2后默认显示的计数器会占用TextField底部空间，进一步压缩文本区域。

修复后的代码： #

child: Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    SizedBox(
      width: 50,
      height: 40,
      child: TextField(
        controller: myController,
        keyboardType: TextInputType.number,
        maxLength: 2,
        textAlign: TextAlign.center,
        // 改为垂直居中对齐
        textAlignVertical: TextAlignVertical.center,
        style: TextStyles.mediumWhiteText,
        decoration: const InputDecoration(
          border: OutlineInputBorder(),
          // 调整内边距适配外层高度，避免内容挤压
          contentPadding: EdgeInsets.symmetric(vertical: 8),
          // 隐藏计数器，释放空间
          counterText: '',
        ),
        inputFormatters: <TextInputFormatter>[
          FilteringTextInputFormatter.digitsOnly
        ],
      ),
    ),
    // 这里可以添加Row的其他子组件
  ],
)

额外优化建议： #

• 如果需要保留长度计数器，可以通过counterStyle设置更小的字号或调整位置，避免影响文本显示。
• 检查TextStyles.mediumWhiteText的字体大小，若字号过大也会导致文本溢出，可适当缩小适配width:50的容器。
• 若调整contentPadding后仍有偏移，可以微调数值，确保文本在边框内完全居中。

内容的提问来源于stack exchange，提问作者Danny Ellis Jr.