Jetpack Compose：如何为AnnotatedString绘制文本背景

当然有合适的方案实现这个需求，完全不需要替换成Canvas组件——Compose给我们提供了更灵活的方式，利用AnnotatedString的标记能力和文本布局回调就能搞定，比View体系的自定义TextView更简洁。

核心思路 #

关键在于利用Text（或BasicText）组件的onTextLayout回调，它能返回TextLayoutResult对象，里面包含了每一行文本的位置、每个字符的边界等详细布局信息。我们可以先给需要加背景的文本段打上标记，再通过布局结果定位这些文本的坐标，最后叠加绘制圆角背景。

具体实现步骤 #

1. 构建带标记的AnnotatedString

首先用buildAnnotatedString创建文本，给需要高亮的部分加上自定义标记（比如用pushStringAnnotation）：

val annotatedText = buildAnnotatedString {
    append("这是一段普通文本，")
    // 给目标文本段打上标记，tag和annotation可以自定义
    pushStringAnnotation(tag = "highlight_bg", annotation = "yellow")
    append("这段需要加圆角背景，即使换行也能适配")
    pop()
    append("，剩下的又是普通文本。")
}

2. 结合onTextLayout和drawBehind绘制背景

使用BasicText（或普通Text组件），通过onTextLayout获取布局信息，再在drawBehind里绘制背景。这里处理了多行文本的情况，每行单独生成圆角背景：

// 记得在Compose函数内定义
val textLayoutResultState = remember { mutableStateOf<TextLayoutResult?>(null) }

BasicText(
    text = annotatedText,
    onTextLayout = { layoutResult ->
        textLayoutResultState.value = layoutResult
    },
    modifier = Modifier.drawBehind {
        textLayoutResultState.value?.let { layoutResult ->
            // 提取所有标记了highlight_bg的文本区间
            val annotations = layoutResult.layoutInput.text.getStringAnnotations(
                tag = "highlight_bg",
                start = 0,
                end = annotatedText.length
            )

            annotations.forEach { annotation ->
                val startOffset = annotation.start
                val endOffset = annotation.end

                // 遍历每一行，处理跨多行的文本段
                for (lineIndex in 0 until layoutResult.lineCount) {
                    val lineStart = layoutResult.getLineStart(lineIndex)
                    val lineEnd = layoutResult.getLineEnd(lineIndex)

                    // 判断当前行是否和标记区间有重叠
                    if (startOffset < lineEnd && endOffset > lineStart) {
                        // 计算当前行内需要高亮的文本起止偏移
                        val lineInnerStart = max(startOffset, lineStart)
                        val lineInnerEnd = min(endOffset, lineEnd)

                        // 获取当前行的上下边界，以及文本段的左右边界
                        val lineTop = layoutResult.getLineTop(lineIndex)
                        val lineBottom = layoutResult.getLineBottom(lineIndex)
                        val textLeft = layoutResult.getBoundingBox(lineInnerStart).left
                        val textRight = layoutResult.getBoundingBox(lineInnerEnd - 1).right

                        // 绘制圆角背景，可自定义颜色和圆角半径
                        drawRoundRect(
                            color = Color.Yellow.copy(alpha = 0.6f),
                            topLeft = Offset(textLeft, lineTop),
                            size = Size(textRight - textLeft, lineBottom - lineTop),
                            cornerRadius = CornerRadius(12.dp.toPx())
                        )
                    }
                }
            }
        }
    }
)

为什么不用Canvas替代Text？ #

完全没必要——Text组件已经帮我们处理了文本排版、换行、字体适配等复杂逻辑，我们只需要在它的绘制流程后叠加背景即可。直接用Canvas的话，你需要自己处理所有文本布局的细节，反而增加了复杂度。

额外优化点 #

• 可以把高亮的颜色、圆角半径等参数抽成可配置的参数，封装成自定义Modifier或自定义Text组件，方便复用。
• 如果需要更精细的控制（比如背景和文字的间距），可以在计算矩形时给上下左右加上额外的偏移量。

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