ImageSpan
[Text]组件的子组件,用于显示行内图片。
说明:
开发前请熟悉鸿蒙开发指导文档 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md
]
该组件从API Version 10开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
子组件
无
接口
ImageSpan(value: ResourceStr | PixelMap)
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
---|---|---|---|
value | [ResourceStr] | [PixelMap] | 是 |
属性
[通用属性]方法支持尺寸设置、背景设置、边框设置。
名称 | 参数类型 | 描述 |
---|---|---|
verticalAlign | [ImageSpanAlignment] | 图片基于文本的对齐方式。 默认值:ImageSpanAlignment.BOTTOM |
objectFit | [ImageFit] | 设置图片的缩放类型。 默认值:ImageFit.Cover |
ImageSpanAlignment
名称 | 描述 |
---|---|
TOP | 图片上边沿与文本上边沿对齐。 |
CENTER | 图片中间与文本中间对齐。 |
BOTTOM | 图片下边沿与文本下边沿对齐。 |
BASELINE | 图片下边沿与文本BaseLine对齐。HarmonyOS与OpenHarmony鸿蒙文档籽料:mau123789是v直接拿 |
事件
通用事件仅支持[点击事件]。
示例
// 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 })
}
}
审核编辑 黄宇
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。
举报投诉
-
组件
+关注
关注
1文章
512浏览量
17819 -
鸿蒙
+关注
关注
57文章
2347浏览量
42827
发布评论请先 登录
相关推荐
HarmonyOS/OpenHarmony应用开发-ArkTS的声明式开发范式
轨迹。状态与数据管理状态数据管理作为基于ArkTS的声明式开发范式的特色,通过功能不同的装饰器给开发者提供了清晰的页面更新渲染流程和管道。状态管理包括UI组件状态和应用程序状态,两者协
发表于 01-17 15:09
鸿蒙ArkTS声明式组件:PatternLock
图案密码锁组件,以九宫格图案的方式输入密码,用于密码验证场景。手指在PatternLock组件区域按下时开始进入输入状态,手指离开屏幕时结束输入状态完成密码输入。
评论