Jetpack Compose TextField编辑时如何显示拖拽气泡调整光标位置？

以下提供两种可落地的实现方式，可根据自定义需求选择：

方案1：官方原生配置（适配 Compose 1.4.0 及以上版本） #

Compose 1.4.0 之后 BasicTextField 以及上层封装的 TextField、OutlinedTextField 已经默认内置了光标拖拽手柄能力，无需额外实现拖拽逻辑，仅需修改配置即可自定义气泡样式：

• 基础配色调整可通过修改 LocalTextSelectionColors 完成，可直接指定手柄气泡颜色和选中文本背景色
• 若需修改系统默认的粘贴、选择工具栏，可搭配重写 LocalTextToolbar 实现
  示例代码：

// 自定义文本选择配色
val customSelectionColors = TextSelectionColors(
    handleColor = Color(0xFF2563EB), // 光标手柄气泡颜色
    backgroundColor = Color(0x4D2563EB) // 选中文本高亮背景色
)
var inputContent by remember { mutableStateOf(TextFieldValue("")) }

CompositionLocalProvider(
    LocalTextSelectionColors provides customSelectionColors
) {
    OutlinedTextField(
        value = inputContent,
        onValueChange = { inputContent = it },
        modifier = Modifier.fillMaxWidth(),
        label = { Text("输入内容") }
    )
}

方案2：全自定义手柄实现（适配所有 Compose 版本，支持高度自定义样式） #

如果需要完全自定义气泡的形状、动画、交互逻辑，可以手动实现拖拽能力，核心逻辑如下：

1. 通过 TextFieldValue.selection.start 实时获取当前光标偏移量
2. 监听 onTextLayout 回调获取 TextLayoutResult，通过它将文本偏移量转换为屏幕坐标
3. 在光标对应位置绘制自定义气泡手柄，添加拖拽手势监听
4. 拖拽过程中计算当前触摸位置对应的文本偏移量，更新光标位置即可
   示例代码：

var inputContent by remember { mutableStateOf(TextFieldValue("")) }
var textLayoutResult: TextLayoutResult? by remember { mutableStateOf(null) }
// 控制手柄显隐，可根据需求调整触发逻辑，比如输入聚焦时显示
val showDragHandle = inputContent.selection.collapsed && inputContent.text.isNotEmpty()

Box(modifier = Modifier.fillMaxWidth()) {
    BasicTextField(
        value = inputContent,
        onValueChange = { inputContent = it },
        onTextLayout = { textLayoutResult = it },
        modifier = Modifier.fillMaxWidth(),
        textStyle = TextStyle(fontSize = 16.sp)
    )
    // 绘制自定义拖拽手柄
    if (showDragHandle && textLayoutResult != null) {
        val cursorOffset = inputContent.selection.start
        val cursorRect = textLayoutResult!!.getCursorRect(cursorOffset)
        Canvas(
            modifier = Modifier
                .offset { IntOffset(cursorRect.right.roundToInt(), cursorRect.bottom.roundToInt()) }
                .size(28.dp)
                .pointerInput(Unit) {
                    detectDragGestures { change, _ ->
                        change.consume()
                        // 计算当前触摸位置对应的文本偏移量
                        val newCursorOffset = textLayoutResult!!.getOffsetForPosition(change.position)
                        inputContent = inputContent.copy(selection = TextRange(newCursorOffset))
                    }
                }
        ) {
            // 此处可替换为自定义气泡绘制逻辑，示例绘制蓝色圆形气泡
            drawCircle(
                color = Color(0xFF2563EB),
                radius = 14.dp.toPx()
            )
        }
    }
}

提示：如果不需要特殊定制手柄样式，优先使用方案1即可，原生实现已经兼容了文本选择、输入法交互、粘贴弹窗等所有系统逻辑，不会出现兼容性问题。

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