Flutter：如何将多行TextFormField的图标置于左上角？

我用Flutter的TextFormField实现了一个可多行输入的文本框，设置minLines:7、maxLines:null支持高度扩展，但通过prefixIcon设置的图标始终在输入框内居中显示，想要把图标调整到提示文本的左上方（左上角位置），该怎么处理？

现有实现代码 #

TextFormField reusableTextField2(String text, IconData icon,TextEditingController controller) {
  return TextFormField(
    controller: controller,
    cursorColor: Colors.white,
    style: TextStyle(color: Colors.white.withOpacity(0.9)),
    decoration: InputDecoration(
      prefixIcon: Icon(
        icon,
        color: Colors.white70,
      ),
      border: OutlineInputBorder(borderRadius: BorderRadius.circular(30.0),
          borderSide: const BorderSide(width: 0, style: BorderStyle.none)),
      contentPadding: EdgeInsets.symmetric(vertical: 20, horizontal: 20),
      labelText: text,
      labelStyle: TextStyle(color: Colors.white.withOpacity(0.9)),
      filled: true,
      floatingLabelBehavior: FloatingLabelBehavior.never,
      fillColor: Colors.white.withOpacity(0.3),
      alignLabelWithHint: true,
    ),
    maxLines: null,
    minLines: 7,
  );
}

效果对比 #

• 当前效果：图标在输入框内垂直居中显示
• 期望效果：图标位于输入框左上角，与提示文本左上方对齐

解决方案 #

prefixIcon默认会在输入区域垂直居中，要实现左上对齐，有两种实用方式：

方式1：用prefix替代prefixIcon，自定义布局 #

把prefixIcon换成prefix，通过Padding自定义图标的位置，同时调整contentPadding避免输入内容和图标重叠：

TextFormField reusableTextField2(String text, IconData icon,TextEditingController controller) {
  return TextFormField(
    controller: controller,
    cursorColor: Colors.white,
    style: TextStyle(color: Colors.white.withOpacity(0.9)),
    decoration: InputDecoration(
      // 替换prefixIcon为prefix，自定义图标位置
      prefix: Padding(
        padding: const EdgeInsets.only(top: 8, left: 16, right: 8),
        child: Icon(
          icon,
          color: Colors.white70,
        ),
      ),
      border: OutlineInputBorder(borderRadius: BorderRadius.circular(30.0),
          borderSide: const BorderSide(width: 0, style: BorderStyle.none)),
      // 调整contentPadding，让输入内容从图标下方开始
      contentPadding: EdgeInsets.fromLTRB(70, 20, 20, 20),
      labelText: text,
      labelStyle: TextStyle(color: Colors.white.withOpacity(0.9)),
      filled: true,
      floatingLabelBehavior: FloatingLabelBehavior.never,
      fillColor: Colors.white.withOpacity(0.3),
      alignLabelWithHint: true,
    ),
    maxLines: null,
    minLines: 7,
  );
}

方式2：自定义prefixIconConstraints约束 #

通过prefixIconConstraints强制约束图标容器的高度，配合调整contentPadding实现左上对齐：

TextFormField reusableTextField2(String text, IconData icon,TextEditingController controller) {
  return TextFormField(
    controller: controller,
    cursorColor: Colors.white,
    style: TextStyle(color: Colors.white.withOpacity(0.9)),
    decoration: InputDecoration(
      prefixIcon: Icon(
        icon,
        color: Colors.white70,
      ),
      // 设置prefixIcon的约束，让容器高度撑满输入框
      prefixIconConstraints: BoxConstraints(
        minWidth: 48,
        minHeight: 48,
        maxHeight: double.infinity,
      ),
      border: OutlineInputBorder(borderRadius: BorderRadius.circular(30.0),
          borderSide: const BorderSide(width: 0, style: BorderStyle.none)),
      // 调整contentPadding的top值，让提示文本和图标对齐
      contentPadding: EdgeInsets.fromLTRB(20, 12, 20, 20),
      labelText: text,
      labelStyle: TextStyle(color: Colors.white.withOpacity(0.9)),
      filled: true,
      floatingLabelBehavior: FloatingLabelBehavior.never,
      fillColor: Colors.white.withOpacity(0.3),
      alignLabelWithHint: true,
    ),
    maxLines: null,
    minLines: 7,
  );
}

注意事项 #

• 两种方式都需要调整contentPadding，确保输入文本不会被图标遮挡
• 方式1的prefix内padding值可根据UI设计灵活调整
• 方式2的prefixIconConstraints中，minWidth保持默认48符合Material Design规范，maxHeight: double.infinity让容器高度撑满输入框，图标会自动贴靠顶部

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