如何在Flutter的Text(Form)Field组件中实现文本垂直居中

解决方案 #

• 开启InputDecoration紧凑模式 #

默认InputDecoration存在内置的上下留白，未开启isDense属性时自定义contentPadding的垂直值不会生效，修改配置如下：
在InputDecoration中添加isDense: true参数，同步调整contentPadding的垂直边距，可根据实际显示效果微调vertical数值。

• 调整字体行高适配 #

你使用的Helvetica Neue字体可能存在自身基线偏移问题，可给TextStyle添加height属性调整行高，数值为字体大小的倍数，建议在1.0~1.2之间调试到和光标对齐即可。

• 校验全局主题覆盖 #

检查全局ThemeData中inputDecorationTheme的配置是否存在全局contentPadding、isDense设置，导致局部输入框的自定义配置被覆盖，可通过在当前InputDecoration中显式指定所有参数覆盖全局配置。

• 固定输入框高度（兜底可选） #

如果上述配置仍未生效，可在外层套固定高度的父容器，强制限制输入框的总高度，配合textAlignVertical: TextAlignVertical.center实现居中。

修改后参考代码 #

// 外层可选套固定高度Container
Container(
  height: 44, // 可自行调整高度
  child: TextFormField(
    textAlignVertical: TextAlignVertical.center,
    maxLines: 1,
    style: const TextStyle(
      fontFamily: 'Helvetica Neue', 
      fontWeight: FontWeight.w400, 
      fontSize: 14,
      height: 1.1, // 调整行高适配字体基线
    ),
    decoration: InputDecoration(
      isDense: true, // 关键：开启紧凑模式取消默认留白
      contentPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10), // 微调vertical参数对齐
      fillColor: Theme.of(context).canvasColor,
      filled: true,
      hintText: widget.hintText,
      border: const OutlineInputBorder(
        borderSide: BorderSide(color: Colors.grey),
      ),
      focusedBorder: const OutlineInputBorder(
        borderSide: BorderSide(color: Colors.black12, width: 0.5),
      ),
    ),
  ),
)

极端情况兜底方案 #

如果确认是字体本身的基线问题无法通过样式调整修复，可通过自定义组合组件实现：
隐藏TextFormField的显示文本（style设为color: Colors.transparent），用Stack嵌套一个和输入文本样式完全一致的Text组件，手动居中放置，监听输入框的文本实时更新Text的内容即可。

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