Flutter中如何将TextFormField内的光标从顶部移至底部？

问题描述 #

需要调整TextFormField内的光标位置，已设置cursorHeight: 1缩小光标，但光标仍停留在顶部，无法移至底部。

预期效果：
实际效果：

用户代码示例：

TextFormField(
  style: TextStyle(
    color: Theme.of(context).textTheme.bodySmall?.color,
    fontSize: 14,
  ),
  minLines: 1,
  maxLines: 1,
  maxLength: 300,
  cursorColor: Theme.of(context).hintColor,
  textAlignVertical: TextAlignVertical.center,
  cursorHeight: 1,
  cursorWidth: 15,
);

解决方法 #

方法1：使用cursorOffset设置偏移 #

Flutter的cursorHeight基于文本基线计算，直接设为1会导致光标对齐顶部。通过cursorOffset可手动调整光标位置，将其向下偏移到文本行底部，偏移值可根据字体大小微调：

TextFormField(
  style: TextStyle(
    color: Theme.of(context).textTheme.bodySmall?.color,
    fontSize: 14,
  ),
  minLines: 1,
  maxLines: 1,
  maxLength: 300,
  cursorColor: Theme.of(context).hintColor,
  textAlignVertical: TextAlignVertical.center,
  cursorHeight: 1,
  cursorWidth: 15,
  cursorOffset: const Offset(0, 12), // 根据实际字体大小调整偏移量
);

方法2：自定义cursorPainter绘制光标 #

如果需要更精确的控制，可通过自定义cursorPainter直接指定光标位置，这种方式无需依赖cursorHeight：

TextFormField(
  style: TextStyle(
    color: Theme.of(context).textTheme.bodySmall?.color,
    fontSize: 14,
  ),
  minLines: 1,
  maxLines: 1,
  maxLength: 300,
  cursorColor: Theme.of(context).hintColor,
  textAlignVertical: TextAlignVertical.center,
  cursorWidth: 15,
  cursorPainter: (Canvas canvas, Rect rect, {Offset? offset, String? textDirection}) {
    // 将光标顶部对齐到文本行底部，高度设为1
    final adjustedRect = rect.copyWith(top: rect.bottom - 1);
    canvas.drawRect(adjustedRect, Paint()..color = Theme.of(context).hintColor);
  },
);

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