如何在 jetpack compose Text 中添加 ImageSpan

Question

据我们所知，AnnotatedString in JetpackCompose has provided some API of Android's SpannedString。

但我没有找到任何 way/workaround 将 ImageSpan 内联到文本（使用 AndroidView 除外）

Answer 1

可以使用 Text Composable 的 AnnotatedString 和 inlineContent 参数将图像放入文本中。

• 在 buildAnnotatedString { ... } 中，我们需要使用 appendInlineContent(id = ...)
为我们的内联内容定义一些 id
• 然后在 Text Composable in inlineContent 参数中，我们提供了一个将此 id 匹配到 InlineTextContent() 对象的映射。

只要您可以在 Placeholder.

中预先定义其大小，您基本上可以将任何内容放在那里

这是在文本中间放置 Image 的样子：

val annotatedString = buildAnnotatedString {
    append("This is text ")
    appendInlineContent(id = "imageId")
    append(" with a call icon")
}
val inlineContentMap = mapOf(
    "imageId" to InlineTextContent(
        Placeholder(20.sp, 20.sp, PlaceholderVerticalAlign.TextCenter)
    ) {
        Image(
            imageVector = Icons.Default.Call,
            modifier = Modifier.fillMaxSize(),
            contentDescription = ""
        )
    }
)

Text(annotatedString, inlineContent = inlineContentMap)