Flutter中TextFormField组件的文本如何与prefixIcon正确对齐

问题核心原因 #

你之前配置的prefixIconConstraints参数中maxHeight、maxWidth仅设置为8，预留空间远小于图标实际尺寸，导致图标被挤压变形，出现和输入文本错位、堆叠的问题。

正确解决方案 #

按如下规则调整参数即可解决对齐问题：

1. 修正prefixIconConstraints尺寸，给图标预留足够的布局空间
2. 用Align组件包裹图标，强制图标在预留空间内居中对齐
3. 按需调整contentPadding适配输入框整体内边距，不要设置过大的垂直数值

TextFormField(
  // 输入框内容内边距按需调整即可
  contentPadding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
  decoration: InputDecoration(
    hintText: "请输入用户名",
    border: const OutlineInputBorder(),
    prefixIcon: Padding(
      padding: const EdgeInsets.only(right: 8.0),
      // 用Align强制图标居中
      child: Align(
        alignment: Alignment.center,
        widthFactor: 1.0,
        heightFactor: 1.0,
        child: Icon(FontAwesomeIcons.user, size: 18),
      ),
    ),
    // 调整约束为足够容纳图标和padding的尺寸，可根据实际需求微调数值
    prefixIconConstraints: const BoxConstraints(
      minHeight: 36,
      minWidth: 36,
      maxHeight: 36,
      maxWidth: 36,
    ),
  ),
)

如果还有细微错位，可以调整Align的alignment参数，比如改为Alignment.centerLeft，或者给外层Padding增加上下边距微调即可。

问题现象示例图 #

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