如何在Jetpack Compose的Text组件中嵌入行内ImageSpan

方案1：官方原生InlineTextContent（推荐，Compose 1.4.0+适用） #

Jetpack Compose 1.4.0及以上版本原生提供了InlineTextContent能力，专门用来在Text组件的AnnotatedString中插入行内自定义内容，完美替代原生的ImageSpan效果，无需依赖AndroidView。

实现步骤如下：

1. 构建AnnotatedString时，在需要插入图片的位置调用appendInlineContent插入占位标记，指定唯一id
2. 构造inlineContent映射表，对应id配置占位尺寸、对齐方式，以及要显示的Compose组件
3. 将AnnotatedString和inlineContent都传入Text组件即可

代码示例：

val annotatedText = buildAnnotatedString {
    append("当前是")
    // 插入行内内容占位，id需后续对应
    appendInlineContent(id = "vip_tag", alternateText = "[VIP标识]")
    append("会员用户")
}

val inlineContentMap = mapOf(
    "vip_tag" to InlineTextContent(
        Placeholder(
            width = 24.sp,
            height = 16.sp,
            // 配置和文字的对齐规则，可选TextBottom、TextCenter、AboveBaseline等
            placeholderVerticalAlign = PlaceholderVerticalAlign.TextCenter
        )
    ) {
        // 此处可放置任意Compose组件，不限于Image
        Image(
            painter = painterResource(R.drawable.ic_vip_tag),
            contentDescription = "VIP标识",
            modifier = Modifier.fillMaxSize()
        )
    }
)

Text(
    text = annotatedText,
    inlineContent = inlineContentMap,
    fontSize = 16.sp
)

该方案优势：

• 纯Compose原生实现，无额外兼容成本，性能优于AndroidView嵌套方案
• 支持插入任意Compose组件，除了图片还可以插入小图标、标签、甚至可交互的小按钮
• 自动适配文字行高、换行规则，和普通文字展示逻辑完全一致

方案2：低版本兼容方案（Compose 1.4.0以下适用） #

如果项目Compose版本暂未升级到1.4.0，可以通过自定义绘制的方式实现行内图片插入：

// 提前加载要显示的图片Bitmap
val vipBitmap = painterResource(R.drawable.ic_vip_tag).asImageBitmap()
val annotatedText = buildAnnotatedString {
    append("当前是")
    // 插入占位文字，长度和图片宽度适配
    append("  ")
    append("会员用户")
}

Text(
    text = annotatedText,
    fontSize = 16.sp,
    modifier = Modifier.drawWithContent {
        // 先绘制原有文字
        drawContent()
        // 计算占位位置，绘制图片
        drawImage(
            image = vipBitmap,
            topLeft = Offset(
                x = measureText("当前是").width,
                y = (size.height - vipBitmap.height) / 2
            )
        )
    }
)

该方案适合简单的固定位置图片插入场景，复杂场景建议优先升级Compose版本使用方案1。

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