如何在自定义TextFormField中实现文本垂直居中？

核心问题 #

仅设置textAlignVertical: TextAlignVertical.center无法生效，通常是因为默认的contentPadding、图标占位、多行提示行高等因素干扰了文本布局。

具体修复方案 #

1. 配合contentPadding调整垂直内边距
   手动设置垂直方向的内边距，让文本在输入框空间内居中：

   TextFormField(
     textAlignVertical: TextAlignVertical.center,
     decoration: InputDecoration(
       // 根据输入框实际高度调整vertical数值，比如固定高度56时设为16
       contentPadding: EdgeInsets.symmetric(vertical: 16, horizontal: 16),
       // 其他装饰属性...
     ),
   )
   

2. 处理图标占位的挤压问题
   如果输入框带prefix/suffix图标，必须限制图标尺寸，避免占用过多垂直空间：

   InputDecoration(
     prefixIcon: Icon(Icons.person),
     prefixIconConstraints: BoxConstraints(maxHeight: 24, maxWidth: 40),
     textAlignVertical: TextAlignVertical.center,
     contentPadding: EdgeInsets.symmetric(vertical: 16, horizontal: 12),
   )
   

3. 修复多行提示文本的偏移
   多行提示文本默认行高会导致整体布局偏移，强制设置hintStyle的height属性：

   InputDecoration(
     hintText: "第一行提示\n第二行提示",
     hintStyle: TextStyle(height: 1.0), // 消除额外行高带来的间距
     textAlignVertical: TextAlignVertical.center,
     contentPadding: EdgeInsets.symmetric(vertical: 12, horizontal: 16),
   )
   

4. 固定高度容器的适配
   若用Container包裹并设置了固定高度，直接把垂直内边距设为0，让文本在容器高度内居中：

   Container(
     height: 56,
     child: TextFormField(
       textAlignVertical: TextAlignVertical.center,
       decoration: InputDecoration(
         contentPadding: EdgeInsets.zero,
         // 其他属性...
       ),
     ),
   )
   

关键注意点 #

• textAlignVertical必须和contentPadding配合使用，单独设置无效
• 多行提示时，务必调整hintStyle的height，否则提示文本的行高会顶偏输入内容
• 图标尺寸过大时，一定要加prefixIconConstraints限制，避免挤压文本区域

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