Flutter：如何实现TextFormField的prefixIcon垂直对齐？

由于Flutter的prefixIcon默认采用垂直居中布局，没有直接提供对齐控制属性，针对你的多行输入场景，可以通过以下几种方法实现自定义垂直对齐：

方法1：使用prefix属性自定义前缀组件（推荐） #

prefix支持完全自定义Widget，能灵活控制图标对齐方式：

TextFormField(
  keyboardType: TextInputType.multiline,
  style: typography.titleMedium,
  validator: (value) {
    if (value.isNullOrEmpty) {
      _shakeDescKey.currentState?.shake();
      return "";
    }
    bloc.onChangeDescription(value!);
    return null;
  },
  decoration: InputDecoration(
    hintText: intl.descMsg,
    hintStyle: typography.titleMedium!
        .apply(color: AppColors.black.withOpacity(0.5)),
    // 替换prefixIcon为自定义prefix组件
    prefix: Align(
      alignment: Alignment.topLeft, // 设置为顶部左对齐，可按需改为topCenter等
      child: Padding(
        padding: const EdgeInsets.only(top: 8.0), // 微调顶部间距适配布局
        child: Icon(FontAwesomeIcons.pen),
      ),
    ),
    cursorColor: Colors.black,
  ),
  maxLines: 6,
);

方法2：用Padding包裹prefixIcon调整位置 #

通过上下内边距控制图标的垂直位置：

TextFormField(
  keyboardType: TextInputType.multiline,
  style: typography.titleMedium,
  validator: (value) {
    if (value.isNullOrEmpty) {
      _shakeDescKey.currentState?.shake();
      return "";
    }
    bloc.onChangeDescription(value!);
    return null;
  },
  decoration: InputDecoration(
    hintText: intl.descMsg,
    hintStyle: typography.titleMedium!
        .apply(color: AppColors.black.withOpacity(0.5)),
    prefixIcon: Padding(
      // 调整上下内边距，让图标上移到目标位置
      padding: const EdgeInsets.only(top: 8.0, bottom: 32.0),
      child: Icon(FontAwesomeIcons.pen),
    ),
    cursorColor: Colors.black,
  ),
  maxLines: 6,
);

方法3：用Container包裹并设置alignment #

利用Container的alignment属性控制图标对齐：

TextFormField(
  keyboardType: TextInputType.multiline,
  style: typography.titleMedium,
  validator: (value) {
    if (value.isNullOrEmpty) {
      _shakeDescKey.currentState?.shake();
      return "";
    }
    bloc.onChangeDescription(value!);
    return null;
  },
  decoration: InputDecoration(
    hintText: intl.descMsg,
    hintStyle: typography.titleMedium!
        .apply(color: AppColors.black.withOpacity(0.5)),
    prefixIcon: Container(
      alignment: Alignment.topCenter, // 设置顶部居中对齐
      child: Icon(FontAwesomeIcons.pen),
    ),
    cursorColor: Colors.black,
  ),
  maxLines: 6,
);

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