HarmonyOS 鸿蒙Next Text中如何增加Image

HarmonyOS 鸿蒙Next Text中，如何增加Image

Text中，如何增加Image

3 回复
可以使用ImageSpan来为Text添加图片,具体使用请参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-imagespan-V5，以下为示例:
深色代码主题
复制
@Entry
@Component
struct SpanExample {
  build() {
  Column() {
    Text() {
      ImageSpan($r('app.media.app_icon')) //资源路径
        .width('100px')
        .height('100px')
          // .objectFit(ImageFit.Fill)
        .verticalAlign(ImageSpanAlignment.CENTER)
      Span('I am LineThrough-span')
        .fontSize(25)
    }
    .width('100%')
    .textIndent(50)
  }
  }
}

更多关于HarmonyOS 鸿蒙Next Text中如何增加Image的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


Text(){

Span('文字')

ImageSpan('图片')
Span('文字')

}

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-basic-components-imagespan-V13

在HarmonyOS NEXT（鸿蒙Next）中，可以通过 ArkUI（基于声明式开发范式）来在文本（Text）中嵌入图片（Image）。以下是几种常见的方法：

方法1：使用 Flex 或 Row 布局（图片和文本并排）

如果想让图片和文本在同一行显示，可以使用 Row 或 Flex 布局：

import { Flex, Text, Image } from '@ohos/hyper';

@Entry
@Component
struct MyComponent {
  build() {
    Row() {
      Image($r('app.media.my_image')) // 加载 resources/base/media 下的图片
        .width(30)
        .height(30)
      Text('这是一段带图片的文本')
        .fontSize(16)
    }
    .padding(10)
  }
}

方法2：使用 Span 实现富文本（图片嵌入文本行内）

如果想在文本中间插入图片（类似富文本效果），可以使用 Span 组件：

import { Text, Span, ImageSpan } from '@ohos/hyper';

@Entry
@Component
struct MyComponent {
  build() {
    Text() {
      Span('这是一段')
        .fontSize(16)
      ImageSpan($r('app.media.my_icon'))
        .width(20)
        .height(20)
      Span('带嵌入图片的文本')
        .fontSize(16)
    }
    .padding(10)
  }
}

注意：ImageSpan 是 Span 的子组件，专门用于在文本行内嵌入图片。

方法3：使用 RichText 组件（复杂富文本）

如果需要更复杂的富文本（如混合多种样式和图片），可以使用 RichText：

import { RichText, ImageSpan } from '@ohos/hyper';

@Entry
@Component
struct MyComponent {
  build() {
    RichText() {
      Span('点击图标：')
      ImageSpan($r('app.media.button_icon'))
        .width(24)
        .height(24)
        .onClick(() => {
          // 图片点击事件
          console.log('图片被点击');
        })
    }
  }
}

关键点总结

  1. 图片资源存放位置：
    • 将图片放在 resources/base/media/ 目录下，通过 $r('app.media.xxx') 引用。
  2. 布局选择：
    • 简单并排：Row + Image + Text
    • 行内嵌入：Text + Span + ImageSpan
    • 复杂富文本：RichText
  3. 交互事件：
    • 可为 ImageSpan 添加 onClick 等事件实现交互。
回到顶部