如何在Jetpack Compose中独立于字体大小修改TextField光标高度？

默认情况下，Jetpack Compose的TextField光标高度会跟随文本的lineHeight（间接受字体大小影响）。要实现光标高度独立于字体大小，有两种常用方案：

方案一：通过BasicTextField固定lineHeight #

TextField是基于BasicTextField封装的，直接使用BasicTextField可以更灵活地控制光标高度。核心思路是固定textStyle中的lineHeight，让光标高度始终等于这个固定值，不受字体大小改变的影响。

示例代码：

var inputText by remember { mutableStateOf("") }

BasicTextField(
    value = inputText,
    onValueChange = { inputText = it },
    cursorBrush = SolidColor(Color.Blue), // 自定义光标颜色
    textStyle = TextStyle(
        fontSize = 24.sp, // 任意设置字体大小
        lineHeight = 28.dp.toSp() // 固定光标高度，转化为sp单位
    ),
    decorationBox = { innerTextField ->
        // 模拟默认TextField的装饰样式（内边距、提示文本）
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 16.dp, vertical = 12.dp),
            contentAlignment = Alignment.CenterStart
        ) {
            if (inputText.isEmpty()) {
                Text("请输入内容", color = Color.Gray)
            }
            innerTextField()
        }
    }
)

这种方式简单高效，适合大多数场景——只要lineHeight固定，无论字体大小怎么调整，光标高度都会保持一致。

方案二：完全自定义光标绘制 #

如果需要更精细的控制（比如光标高度与lineHeight无关），可以隐藏默认光标，通过Modifier.drawBehind手动绘制固定高度的光标。

示例代码：

var inputText by remember { mutableStateOf("") }
val focusRequester = remember { FocusRequester() }
var isFocused by remember { mutableStateOf(false) }
var cursorPosition by remember { mutableStateOf(0) }

// 文本测量器，用于获取光标位置坐标
val textMeasurer = rememberTextMeasurer()
val textLayoutResult = remember(inputText, LocalTextStyle.current) {
    textMeasurer.measure(text = inputText, style = LocalTextStyle.current)
}

TextField(
    value = inputText,
    onValueChange = { inputText = it },
    onTextLayout = { layoutResult ->
        // 更新当前光标位置
        cursorPosition = layoutResult.cursorOffset
    },
    modifier = Modifier
        .focusRequester(focusRequester)
        .onFocusChanged { isFocused = it.isFocused }
        .drawBehind {
            if (isFocused && inputText.isNotEmpty()) {
                // 获取默认光标对应的水平位置
                val cursorRect = textLayoutResult.getCursorRect(cursorPosition)
                // 固定光标高度（比如32dp）
                val fixedCursorHeight = 32.dp.toPx()
                // 计算光标垂直居中的起始Y坐标
                val cursorStartY = center.y - fixedCursorHeight / 2

                // 绘制自定义光标
                drawLine(
                    color = Color.Red,
                    start = Offset(cursorRect.left, cursorStartY),
                    end = Offset(cursorRect.left, cursorStartY + fixedCursorHeight),
                    strokeWidth = 2.dp.toPx() // 光标宽度
                )
            }
        },
    // 隐藏默认光标
    cursorBrush = SolidColor(Color.Transparent)
)

注意事项 #

• 自定义光标时需要处理聚焦状态、光标位置更新，确保光标在正确的位置显示。
• 如果文本包含多行或复杂样式，需要调整textLayoutResult的获取逻辑，保证光标位置计算准确。

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