代码拉取完成,页面将自动刷新
Text组件的子组件,用于显示行内图片。
说明:
该组件从API Version 10开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
无
ImageSpan(value: ResourceStr | PixelMap)
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
---|---|---|---|
value | ResourceStr | PixelMap | 是 | 图片的数据源,支持本地图片和网络图片。 当使用相对路径引用图片资源时,例如 ImageSpan("common/test.jpg") ,不支持跨包/跨模块调用该ImageSpan组件,建议使用$r 方式来管理需全局使用的图片资源。- 支持的图片格式包括png、jpg、bmp、svg和gif。 - 支持 Base64 字符串。格式data:image/[png|jpeg|bmp|webp];base64,[base64 data] , 其中[base64 data] 为Base64 字符串数据。- 支持file:///data/storage路径前缀的字符串,用于读取本应用安装目录下files文件夹下的图片资源。需要保证目录包路径下的文件有可读权限。 |
通用属性方法支持尺寸设置、背景设置、边框设置。
名称 | 参数类型 | 描述 |
---|---|---|
verticalAlign | ImageSpanAlignment | 图片基于文本的对齐方式。 默认值:ImageSpanAlignment.BOTTOM |
objectFit | ImageFit | 设置图片的缩放类型。 默认值:ImageFit.Cover |
名称 | 描述 |
---|---|
TOP | 图片上边沿与文本上边沿对齐。 |
CENTER | 图片中间与文本中间对齐。 |
BOTTOM | 图片下边沿与文本下边沿对齐。 |
BASELINE | 图片下边沿与文本BaseLine对齐。 |
通用事件仅支持点击事件。
// xxx.ets
@Entry
@Component
struct SpanExample {
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start}) {
Text() {
Span('This is the Span and ImageSpan component').fontSize(25).textCase(TextCase.Normal)
.decoration({ type: TextDecorationType.None, color: Color.Pink })
}.width('100%').textAlign(TextAlign.Center)
Text() {
ImageSpan($r('app.media.icon'))
.width('200px')
.height('200px')
.objectFit(ImageFit.Fill)
.verticalAlign(ImageSpanAlignment.CENTER)
Span('I am LineThrough-span')
.decoration({ type: TextDecorationType.LineThrough, color: Color.Red }).fontSize(25)
ImageSpan($r('app.media.icon'))
.width('50px')
.height('50px')
.verticalAlign(ImageSpanAlignment.TOP)
Span('I am Underline-span')
.decoration({ type: TextDecorationType.Underline, color: Color.Red }).fontSize(25)
ImageSpan($r('app.media.icon'))
.size({width:'100px', height:'100px'})
.verticalAlign(ImageSpanAlignment.BASELINE)
Span('I am Underline-span')
.decoration({ type: TextDecorationType.Underline, color: Color.Red }).fontSize(25)
ImageSpan($r('app.media.icon'))
.width('70px')
.height('70px')
.verticalAlign(ImageSpanAlignment.BOTTOM)
Span('I am Underline-span')
.decoration({ type: TextDecorationType.Underline, color: Color.Red }).fontSize(50)
}
.width('100%')
.textIndent(50)
}.width('100%').height('100%').padding({ left: 0, right: 0, top: 0 })
}
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。