Flutter中Container设height:40时TextField文本左中对齐异常

在固定宽高的Container中嵌套TextField时，将Container的height设为40时，TextField的提示文本与输入文本无法左中对齐；但height设为50时显示正常。调整字号、参考相关技术方案后问题仍未解决。

原代码： #

Container(
  width: 300,
  height: 40,
  alignment: Alignment.centerLeft,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    color: Colors.deepPurpleAccent,
  ),
  child: TextFormField(
    textAlign: TextAlign.left,
    style: TextStyle(color: Colors.white),
    decoration: InputDecoration(
      contentPadding: EdgeInsets.only(left: 16),
      hintText: 'Enter your text',
      border: InputBorder.none,
      hintStyle: TextStyle(
        color: Colors.white,
      ),
    ),
  ),
),

效果对比： #

• height=50时正常UI：
  

• height=40时异常UI：
  

解决方案 #

问题根源是TextField默认存在垂直方向的内边距，当Container高度缩小到40时，默认内边距挤占了文本的垂直居中空间。通过以下调整可以解决：

1. 添加textAlignVertical: TextAlignVertical.center强制文本垂直居中
2. 启用isDense: true减少TextField默认的垂直间距
3. （可选）微调contentPadding的垂直值适配Container高度

修改后的代码： #

Container(
  width: 300,
  height: 40,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    color: Colors.deepPurpleAccent,
  ),
  child: TextFormField(
    textAlignVertical: TextAlignVertical.center,
    textAlign: TextAlign.left,
    style: TextStyle(color: Colors.white),
    decoration: InputDecoration(
      contentPadding: EdgeInsets.only(left: 16),
      hintText: 'Enter your text',
      border: InputBorder.none,
      hintStyle: TextStyle(color: Colors.white),
      isDense: true,
    ),
  ),
),

如果仍有细微偏移，可以将contentPadding改为EdgeInsets.symmetric(vertical: 6, horizontal: 16)，根据实际字号调整垂直内边距值。

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