Android中如何将Spannable转换为AnnotatedString？

完全不需要从头编写大量代码，你可以通过扩展函数实现Spannable到AnnotatedString的转换，覆盖项目中常用的Span类型即可。

核心转换扩展函数 #

实现一个Spannable的扩展函数，遍历所有Span并映射到Compose对应的SpanStyle或注解：

fun Spannable.toAnnotatedString(): AnnotatedString {
    val builder = AnnotatedString.Builder(this.toString())
    getSpans(0, length, Any::class.java).forEach { span ->
        val start = getSpanStart(span)
        val end = getSpanEnd(span)
        
        when (span) {
            // 前景色Span
            is ForegroundColorSpan -> {
                builder.addStyle(
                    SpanStyle(color = Color(span.foregroundColor)),
                    start,
                    end
                )
            }
            // 背景色Span
            is BackgroundColorSpan -> {
                builder.addStyle(
                    SpanStyle(background = Color(span.backgroundColor)),
                    start,
                    end
                )
            }
            // 字体样式（粗体/斜体）
            is StyleSpan -> {
                val spanStyle = when (span.style) {
                    Typeface.BOLD -> SpanStyle(fontWeight = FontWeight.Bold)
                    Typeface.ITALIC -> SpanStyle(fontStyle = FontStyle.Italic)
                    Typeface.BOLD_ITALIC -> SpanStyle(
                        fontWeight = FontWeight.Bold,
                        fontStyle = FontStyle.Italic
                    )
                    else -> null
                }
                spanStyle?.let { builder.addStyle(it, start, end) }
            }
            // 下划线Span
            is UnderlineSpan -> {
                builder.addStyle(
                    SpanStyle(textDecoration = TextDecoration.Underline),
                    start,
                    end
                )
            }
            // 删除线Span
            is StrikethroughSpan -> {
                builder.addStyle(
                    SpanStyle(textDecoration = TextDecoration.LineThrough),
                    start,
                    end
                )
            }
            // 相对字号Span
            is RelativeSizeSpan -> {
                builder.addStyle(
                    SpanStyle(fontSize = span.sizeChange.em),
                    start,
                    end
                )
            }
            // 可点击Span（需配合Text的点击事件处理）
            is ClickableSpan -> {
                builder.addStringAnnotation(
                    tag = "clickable_span",
                    annotation = span.hashCode().toString(), // 用哈希值标识不同点击Span
                    start = start,
                    end = end
                )
                // 模拟原生可点击文本样式
                builder.addStyle(
                    SpanStyle(
                        color = Color.Blue,
                        textDecoration = TextDecoration.Underline
                    ),
                    start,
                    end
                )
            }
            // 可根据项目需求添加更多Span类型的转换
        }
    }
    return builder.toAnnotatedString()
}

复杂场景处理 #

可点击Span的交互实现 #

转换后的AnnotatedString需要在Compose的Text组件中处理点击事件：

val spannable = yourCurrencyFormatter.format(1234.56) // 项目中原有的Spannable工具类
val annotatedText = spannable.toAnnotatedString()

Text(
    text = annotatedText,
    modifier = Modifier.clickable { offset ->
        annotatedText.getStringAnnotations("clickable_span", offset, offset)
            .firstOrNull()?.let { annotation ->
                // 根据annotation找到对应的ClickableSpan并触发点击
                val targetSpan = spannable.getSpans(0, spannable.length, ClickableSpan::class.java)
                    .firstOrNull { it.hashCode().toString() == annotation.annotation }
                targetSpan?.onClick(LocalView.current)
            }
    }
)

图片Span（ImageSpan）的处理 #

原生ImageSpan无法直接映射到AnnotatedString，需要提取图片信息并使用Compose的InlineContent实现：

// 在转换函数中处理ImageSpan
is ImageSpan -> {
    val drawable = span.drawable ?: return@forEach
    // 计算图片尺寸，适配Compose的排版
    val size = drawable.intrinsicSize.run {
        DpSize(width.toDp(), height.toDp())
    }
    // 生成唯一标识
    val contentId = "image_${span.hashCode()}"
    builder.addInlineContent(contentId, size)
}

// 在Text组件中提供InlineContent
Text(
    text = annotatedText,
    inlineContent = mapOf(
        "image_xxx" to InlineTextContent(
            Placeholder(size.width, size.height, PlaceholderVerticalAlign.TextCenter)
        ) {
            Image(
                painter = rememberDrawablePainter(drawable),
                contentDescription = null
            )
        }
    )
)

注意事项 #

• 只需要实现项目中实际用到的Span类型转换，不用覆盖所有原生Span，减少不必要的代码。
• 测试转换后的样式与原生TextView的显示效果，确保一致性。
• 对于自定义Span，需要根据其功能映射到Compose对应的API（比如自定义排版Span对应SpanStyle，交互Span对应注解+Modifier处理）。

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