如何自定义Jetpack Compose中BasicTextField的光标（形状、宽度、颜色）？

针对BasicTextField无法通过内部CoreTextField自定义光标宽度和形状的问题，这里提供两种基于公开API的可行方案：

方案一：通过cursorBrush参数自定义光标样式 #

利用BasicTextField提供的cursorBrush参数，结合自定义Brush可以快速调整光标宽度或实现简单形状：

• 调整光标宽度：使用ScaleXTransform缩放默认的纯色光标

BasicTextField(
    value = text,
    onValueChange = { text = it },
    cursorBrush = SolidColor(Color.Blue).transform(ScaleXTransform(2f)) // 将光标宽度放大2倍
)

• 实现特殊形状光标：自定义Brush绘制圆形、圆角等样式

// 自定义圆形光标Brush
val circleCursorBrush = object : Brush() {
    override fun createShader(size: Size): Shader {
        return RadialGradientShader(
            colors = listOf(Color.Blue, Color.Blue),
            center = Offset(size.width / 2, size.height / 2),
            radius = size.width.coerceAtLeast(size.height) / 2
        )
    }
}

BasicTextField(
    value = text,
    onValueChange = { text = it },
    cursorBrush = circleCursorBrush
)

方案二：通过Canvas叠加绘制自定义光标 #

隐藏默认光标后，在BasicTextField的装饰层中自行绘制光标，可实现任意复杂样式：

var textFieldValue by remember { mutableStateOf(TextFieldValue("")) }
val cursorPosition = textFieldValue.selection.start

BasicTextField(
    value = textFieldValue,
    onValueChange = { textFieldValue = it },
    cursorBrush = TransparentBrush // 隐藏默认光标
) { innerTextField ->
    Box {
        innerTextField()
        // 仅在光标处于选中状态（无文本选择）时绘制自定义光标
        if (textFieldValue.selection.start == textFieldValue.selection.end) {
            val cursorRect = remember { mutableStateOf(Rect.Zero) }
            val textLayoutResult = remember { mutableStateOf<TextLayoutResult?>(null) }

            // 更新光标位置
            LaunchedEffect(textFieldValue) {
                textLayoutResult.value?.let {
                    cursorRect.value = it.getCursorRect(cursorPosition)
                }
            }

            // 绘制自定义光标
            Canvas(modifier = Modifier.matchParentSize()) {
                textLayoutResult.value?.let {
                    drawRoundRect(
                        color = Color.Red,
                        topLeft = cursorRect.value.topLeft,
                        size = Size(4f, cursorRect.value.height), // 自定义光标宽度和高度
                        cornerRadius = CornerRadius(2f) // 设置圆角
                    )
                }
            }
        }
    }
}

以上两种方案均无需调用Jetpack Compose内部API，完全基于公开接口实现，可覆盖大部分光标自定义需求。

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