如何为Flutter的TextFormField添加前缀图标且不偏移标签？

当给TextFormField添加前缀图标后，标签（labelText）出现与输入文本垂直对齐的情况，可通过以下几种方法保持标签原有位置：

方法一：强制标签始终浮动 #

使用floatingLabelBehavior参数设置为FloatingLabelBehavior.always，让标签固定在输入框上方，不受前缀图标影响：

TextFormField(
  decoration: InputDecoration(
    labelText: '用户名',
    prefixIcon: const Icon(Icons.person),
    floatingLabelBehavior: FloatingLabelBehavior.always,
    border: const OutlineInputBorder(),
  ),
)

方法二：自定义前缀区域替代prefixIcon #

用prefix参数自定义前缀布局，通过Container控制图标位置，避免干扰标签的默认布局：

TextFormField(
  decoration: InputDecoration(
    labelText: '用户名',
    prefix: Container(
      padding: const EdgeInsets.symmetric(horizontal: 12),
      child: const Icon(Icons.person),
    ),
    border: const OutlineInputBorder(),
  ),
)

方法三：约束前缀图标尺寸 #

通过prefixIconConstraints给前缀图标设置固定的最小宽高，防止其挤压标签的布局空间：

TextFormField(
  decoration: InputDecoration(
    labelText: '用户名',
    prefixIcon: const Icon(Icons.person),
    prefixIconConstraints: const BoxConstraints(
      minWidth: 48,
      minHeight: 48,
    ),
    border: const OutlineInputBorder(),
  ),
)

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