在 Jetpack Compose 中，我们可以自定义文本框的样式，但是 BasicTextField 的光标拇指颜色无法直接更改。解决这个问题的一种方法是使用 BasicTextField 上方的 Overlay 来实现自定义光标拇指。我们可以创建自定义的光标拇指 Drawable，然后将其添加到 Overlay 中。

示例代码如下：

@Composable
fun CustomTextField(value: String, onValueChange: (String) -> Unit) {
    val overlay = object : Drawable() {
        override fun draw(canvas: Canvas) {
            // 绘制自定义光标拇指的代码
        }

        override fun setAlpha(alpha: Int) {}
        override fun getOpacity(): Int = PixelFormat.UNKNOWN
        override fun setColorFilter(colorFilter: ColorFilter?) {}
    }

    BasicTextField(
        value = value,
        onValueChange = onValueChange,
        cursorBrush = SolidColor(Color.Transparent),
        decorationBox = { innerTextField ->
            Box {
                innerTextField()

                // 添加自定义光标拇指的 Overlay
                AndroidView(
                    factory = { context ->
                        View(context).apply {
                            background = overlay
                            layoutParams = ViewGroup.LayoutParams(10.dp.toPx().toInt(), 10.dp.toPx().toInt())
                        }
                    },
                    update = { view: View -> view.background = overlay },
                    modifier = Modifier.drawWithCache {
                        drawLayer(
                            shadowRadius = 0f,
                            alpha = 0.95f,
                            clipPath = {
                                val path = Path().apply {
                                    addRect(RectF(0f, 0f, layoutSize.width, layoutSize.height))
                                    addRect(
                                        RectF(
                                            layoutPosX + contentPadding.left,
                                            layoutPosY + contentPadding.top,
                                            layoutPosX + innerTextField().layoutWidth - contentPadding.right,
                                            layoutPosY + innerTextField().layoutHeight - contentPadding.bottom
                                        )
                                    )
                                    winding = Path.Op.XOR
                                }
                                path
                            }) { }
                    }
                )
            }
        }
    )
}

使用 CustomTextField 方法代替 BasicTextField 来创建具有自定义光标拇指的文本框：

var text by remember { mutableStateOf("") }
CustomTextField(value = text, onValueChange = { text = it })

在上面的示例代码中，我们创建了一个大小为 10dp 的自定义光标拇指 Drawable，并将其添加到 BasicTextField 上方的 Overlay 中。我们使用 drawWithCache Modifier 来获取 BasicTextField 的位置和大小信息，并将其应用于自定义光标拇指的位置。由于 drawWithCache 方法使用了 GPU 渲染，所以我们需要通过参数调整其阴影半径和不透明度，以确保自定义光标拇指不会被遮挡和显示得过分明显。