Flutter iOS风格文本输入框CupertinoTextField光标在Android中未与提示文本对齐

Flutter 开发问题点一览

• Flutter iOS风格中Widget内容滑到了顶部导航栏后面与其重叠
• Flutter iOS风格文本输入框CupertinoTextField光标在Android中未与提示文本对齐

---

---

1. 问题描述

Flutter iOS风格文本输入控件 CupertinoTextField 在Android系统中文本输入框光标未与输入提示文本对齐，现象如下图

2. 原因、对策

观察 CupertinoTextField 在 Android系统中的表现可以发现，光标高度与文本高度是一样高的，但光标位置向上偏移了一些。
对比 Android 与 iOS的效果可以发现，Android的光标高度短于 iOS的光标高度。

原因

CupertinoTextField 的光标在Andorid与iOS中的绘制起点一致，但因长度在Android偏短，造成了光标未与提示文本对齐的现象。

对策

• 方式一：设置 CupertinoTextField 的属性 cusorHeight 为具体的值（）

      CupertinoTextField(
        cursorHeight: 26.0,
      )

• 方式二：修改 CupertinoTextField 中文本 TextStyle 的高度属性height

      CupertinoTextField(
        style: TextStyle(height: 1.2),
      ),

• 方式三：使用 Android 风格的文本输入框TextField

3. 源码分析

3.1 查看 CupertinoTextField 源码

查看光标的高度的属性 cursorHeight ，其值实际是赋予给了 EditableText.cursorHeight

3.2 查看 EditableText.cursorHeight属性

如果未设置 cursorHeight 则使用 RenderEditable.preferredLineHeight

preferredLineHeight 的值为 TextPainter.preferredLineHeight

preferredLineHeight 的值与 TextStyle 相关，默认高度为文本 空格 的高度

最终通过Native方法返回高度
依次调用顺序为
CupertinoTextField -> EditableText -> _Editable -> RenderEditable -> preferredLineHeight -> TextPainter.preferredLineHeight

3.3 查看 cursorHeight 的具体使用

第1、2步知道了光标默认的高度与 TextStyle 相关，并未了解到为何iOS与Android的光标高度不一致。
继续查看 RenderEditable 源码，可以发现在 _computeCaretPrototype 方法中进行了游标绘制的相关计算，并说明了此问题。

3.4 结论

该现象为Flutter的特意而为之，现阶段需要开发人员自己适配，将来或许会改善。