美文网首页
在Compose Text中插入图片inlineContent

在Compose Text中插入图片inlineContent

作者: 愿天深海 | 来源:发表于2023-07-23 19:54 被阅读0次

在Android原生开发的时候,想要实现在TextView中插入图片,有多种方式可以实现:

  • 在xml文件中可以直接使用drawableEnd等属性
  • 在代码里可以使用setCompoundDrawables、setCompoundDrawablesWithIntrinsicBounds等方法
  • 使用ImageSpan定制插入图片

网上查找相关的使用资料都很多。

最近在学习使用Compose,也遇到了需要在Compose的Text里插入图片,参数看了一圈也没发现跟图片相关的,网上查找也少得可怜。
终于,发现了一线希望,有资料提及到可以使用inlineContent,Text的参数里还真有inlineContent,之前看的还是不够仔细啊。

inlineContent - a map storing composables that replaces certain ranges of the text, used to insert composables into text layout. See InlineTextContent.

意思是说可以在文本布局里指定范围用以插入composables,在Compose里那可是万物皆可composables,插入图片自然也是没问题的。

示例:

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)

在buildAnnotatedString时用以id标记,inlineContentMap里填充对应id的占位大小、对齐方式、Composable函数内容,

结果:


image.png

相关文章

  • react-native踩过的坑

    React-native 1.Text文本中插入图片:View用弹性布局 ...

  • 如何插入图片

    富文本(Rich-text)编辑器下插入图片: 点击功能栏上的插入图片的图标,在弹出的对话框中可选择本地上传图片或...

  • 如何插入图片

    富文本(Rich-text)编辑器下插入图片: 点击功能栏上的插入图片的图标,在弹出的对话框中可选择本地上传图片或...

  • Compose Text

    Text Compose 中的Text ,对标TextView Text属性列表 属性作用示例text文本内容"普...

  • word表格中插入图片时只显示一个窄条的解决方法

    在word表格中插入图片的操作很简单: 插入->图片 然后,在盘上选择图片插入。 但是,有的时候,插入的图片只显示...

  • 在博客中插入图片

    在写文章时,常常有配图说明的需求,Hexo有多种图片插入方式,可以将图片存放在本地引用或者将图片放在CDN上引用,...

  • md语言的使用

    插入图片 在 Markdown 中,插入图片不需要其他按钮,你只需要使用![] (图片地址) 插入引用 插入链接和...

  • img图片实现垂直居中

    当我们插入的图片小于父盒子的时候,图片就会默认在左上角显示。 一、先给父盒子添加 text-aling:cento...

  • 在PPT中如何插入及编辑图片

    在PPT中如何插入及编辑图片 在幻灯片中既可插入计算机中保存的图片,也可插入联机图片和屏幕截取的图片。 关-1- ...

  • 如何在HTML上插入图片

    在HTML中插入图片的方法有:直接在html代码上插入、在CSS样式中插入、在JavaScript中通过给img设...

网友评论

      本文标题:在Compose Text中插入图片inlineContent

      本文链接:https://www.haomeiwen.com/subject/spxqpdtx.html