Jetpack Compose 中如何减小 TextField 组件的光标高度

根据你使用的技术栈，可选择对应的实现方式：

• Flutter 框架 #

  直接使用 TextField 内置的 cursorHeight 参数即可配置光标高度，也可搭配其他光标相关参数做自定义：

  TextField(
    cursorHeight: 18, // 按需调整数值即可，默认跟随字体高度自适应
    cursorWidth: 2, // 可选：调整光标宽度
    cursorColor: Colors.blue, // 可选：调整光标颜色
    // 其余业务属性
  )
  

  若需要光标和文字垂直对齐，可搭配 strutStyle 微调行高：

  TextField(
    cursorHeight: 18,
    strutStyle: StrutStyle(
      height: 1.2,
      forceStrutHeight: true,
    ),
  )
  

• Android 原生 #

  通过自定义光标Drawable实现高度调整：

  1. 在 res/drawable 目录下新建 custom_cursor.xml：

  <?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="rectangle">
      <solid android:color="@color/your_cursor_color" />
      <size 
        android:width="2dp"
        android:height="18dp" /> <!-- 此处设置光标高度 -->
  </shape>
  

  2. 在布局中给 EditText 配置该Drawable：

  <EditText
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:textCursorDrawable="@drawable/custom_cursor" />
  

• 前端Web端 #

  可通过调整输入框行高控制光标高度，如需更精细控制可自定义模拟光标：

  /* 简单调整方式：修改行高即可同步改变光标高度 */
  input[type="text"], textarea {
    line-height: 1.2;
    caret-color: #1677ff;
  }
  
  /* 自定义光标实现更高自由度 */
  .custom-input {
    caret-color: transparent; /* 隐藏原生光标 */
    position: relative;
  }
  /* 配合JS实现自定义光标的位置跟随、闪烁逻辑，高度可自由设置 */
  

• iOS 原生 #

  SwiftUI

  TextField("输入提示", text: $inputText)
      .tint(.blue)
      .onAppear {
          UITextField.appearance().cursorRect = { rect in
              var customRect = rect
              customRect.size.height = 18 // 调整光标高度
              return customRect
          }()
      }
  

  UIKit

  重写 caretRect 方法即可：

  class CustomTextField: UITextField {
      override func caretRect(for position: UITextPosition) -> CGRect {
          var rect = super.caretRect(for: position)
          rect.size.height = 18 // 自定义高度值
          return rect
      }
  }
  

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