鸿蒙ArkTS声明式组件：ImageSpan

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 })
  }
}

审核编辑 黄宇