Jetpack Compose 可编辑文本中实现部分内容可点击的最优方案是什么

直接基于官方原生 TextField 实现是成本最低、兼容性最好的方案，不用自定义复杂的输入组件，也无需适配输入法、文本选中等基础能力，完美支持 AnnotatedString 自定义样式和局部点击需求。

核心实现逻辑 #

• 优先用 TextField 自带的编辑、选中文本能力，避免重复造轮子，改造 ClickableText 需要自行实现的输入处理、光标控制、选中逻辑复杂度极高，完全没有必要
• 借助 AnnotatedString 的注解能力给需要点击的文本片段打标记，同时设置你需要的自定义样式
• 结合 TextField 的 onTextLayout 回调拿到文本布局信息，点击时判断点击位置对应的文本片段是否为可点击标记，触发对应逻辑即可

关键代码示例 #

@Composable
fun ClickableEditableTextField() {
    val context = LocalContext.current
    // 存储文本内容、选中状态等信息
    var textFieldValue by remember {
        mutableStateOf(
            TextFieldValue(
                annotatedString = buildAnnotatedString {
                    append("这是普通可编辑文本")
                    // 为可点击片段添加标记和自定义样式
                    pushStringAnnotation(tag = "custom_click", annotation = "点击事件参数")
                    withStyle(
                        style = SpanStyle(
                            color = Color(0xFF1677ff),
                            textDecoration = TextDecoration.Underline,
                            fontWeight = FontWeight.Medium
                        )
                    ) {
                        append("这是可点击的文本片段")
                    }
                    pop()
                    append("其余可编辑普通文本")
                }
            )
        )
    }
    // 存储文本布局信息，用于点击位置计算
    var textLayoutResult by remember { mutableStateOf<TextLayoutResult?>(null) }

    TextField(
        value = textFieldValue,
        onValueChange = { newVal ->
            // 这里可以根据需求处理文本变化，重新构造带标记的AnnotatedString
            textFieldValue = newVal
        },
        onTextLayout = { layoutResult ->
            textLayoutResult = layoutResult
        },
        modifier = Modifier
            .fillMaxWidth()
            .pointerInput(Unit) {
                detectTapGestures { tapOffset ->
                    // 文本选中状态下不触发点击，避免冲突
                    if (textFieldValue.selection.start != textFieldValue.selection.end) {
                        return@detectTapGestures
                    }
                    val layout = textLayoutResult ?: return@detectTapGestures
                    // 将点击坐标转换为文本内的字符偏移量
                    val clickCharOffset = layout.getOffsetForPosition(tapOffset)
                    // 查询当前偏移位置是否存在我们标记的可点击注解
                    val clickAnnotations = textFieldValue.annotatedString.getStringAnnotations(
                        tag = "custom_click",
                        start = clickCharOffset,
                        end = clickCharOffset
                    )
                    if (clickAnnotations.isNotEmpty()) {
                        // 取出注解携带的参数，执行对应点击逻辑
                        val param = clickAnnotations.first().item
                        Toast.makeText(context, "触发点击，参数：$param", Toast.LENGTH_SHORT).show()
                    }
                }
            }
    )
}

注意事项 #

• 如果文本编辑过程中需要动态更新可点击片段，在 onValueChange 回调里重新构造带对应标记和样式的 AnnotatedString 赋值给 TextFieldValue 即可
• 若出现点击事件被消费无法触发的情况，可以修改手势监听为 awaitFirstDown(requireUnconsumed = false) 强制获取点击事件
• 该方案兼容所有 TextField 原生属性，你可以正常配置输入类型、最大行数、光标样式等配置

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