HarmonyOS鸿蒙Next中Text组件设置属性字符串，属性字符串中的image如何响应交互事件

HarmonyOS鸿蒙Next中Text组件设置属性字符串，属性字符串中的image如何响应交互事件 在使用Text组件时，涉及到了富文本的展示，此处使用styledString，参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-styled-string-V5#styledstring 当富文本各字符串设置点击事件时，在图片时遇到问题: 当value值为ImageAttachment或CustomSpan时，styles参数不生效。 致使富文本中的展示图片的部分缺失了交互能力，这个如何处理？ 参考附件图片示例:这段富文本有三部分组成，url文本部分，图片部分，尾部文本部分； url链接部分可点击，图片怎么有单独的点击事件可处理？ 参考:

// 创建 TextController 实例
textController: TextController = new TextController(); 

// 创建可变样式字符串
let result = new MutableStyledString('');

// 定义页面内容
let pg1 = 'https://www.baidu.com';
let pg2 = '[图片]';
let pg3 = '这是测试后半段';

// 获取图标图片
let img = $r('app.media.appIcon');
const imagePixelMap = await this.getPixmapFromMedia(img);

// 定义文本样式
let normalTextAttribute = new TextStyle({
    fontColor: ColorConst.FC2,
    fontSize: LengthMetrics.vp(FontSizeConst.FS_6)
});

let linkTextAttribute = new TextStyle({
    fontColor: ColorConst.FC2,
    fontSize: LengthMetrics.vp(FontSizeConst.FS_6)
});

// 定义点击手势属性
const clickGestureAttr: GestureStyle = new GestureStyle({
    onClick: () => {
        Logger.info(TAG, `click StyledString...`);
    }
});

const clickGestureAttr2: GestureStyle = new GestureStyle({
    onClick: () => {
        Logger.info(TAG, `click StyledString2...`);
    }
});

// 插入链接样式字符串
result.insertStyledString(0, new StyledString(pg1, [
    {
        start: 0,
        length: pg1.length,
        styledKey: StyledStringKey.FONT,
        styledValue: linkTextAttribute,
    },
    {
        start: 0,
        length: pg1.length,
        styledKey: StyledStringKey.GESTURE,
        styledValue: clickGestureAttr,
    }
]));

// 插入图片附件
const imgAttachment = new ImageAttachment({
    value: imagePixelMap,
    size: { width: 50, height: 50 },
    layoutStyle: { borderRadius: LengthMetrics.vp(10) },
    verticalAlign: ImageSpanAlignment.BASELINE,
    objectFit: ImageFit.Fill
});

result.insertStyledString(pg1.length, new StyledString(imgAttachment, null));

// 插入普通文本
result.insertStyledString(result.length, new StyledString(pg3, [
    {
        start: 0,
        length: pg3.length,
        styledKey: StyledStringKey.FONT,
        styledValue: normalTextAttribute
    }
]));

// 设置样式字符串到 TextController
this.textController.setStyledString(result);

// Text 组件设置
Text(undefined, { controller: this.textController })
    .onClick((event: ClickEvent) => {
        Logger.info(TAG, `event: ${event}`);
    });

更多关于HarmonyOS鸿蒙Next中Text组件设置属性字符串，属性字符串中的image如何响应交互事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复 
Text() {
    Span('测试文本')
      .fontSize(25)
    ImageSpan($r('app.media.icon'))
      .width('100px')
      .height('100px')
      .objectFit(ImageFit.Fill)
      .verticalAlign(ImageSpanAlignment.BOTTOM)
      .onClick(()=> {
        console.log('测试输出')
      })
}

更多关于HarmonyOS鸿蒙Next中Text组件设置属性字符串，属性字符串中的image如何响应交互事件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，Text组件的属性字符串可以通过Span来设置图像。要响应图像上的交互事件，可以使用ClickableSpan或ImageSpan结合事件监听器来实现。具体步骤如下：

  1. 创建ImageSpan：使用ImageSpan将图像插入到Text组件的属性字符串中。
  2. 设置ClickableSpan：通过ClickableSpan为图像添加点击事件。
  3. 处理事件：在ClickableSpan的onClick方法中处理图像的点击事件。

示例代码如下：

import { Text, Span, ImageSpan, ClickableSpan } from '@ohos.agp.components';

let text = new Text(context);
let span = new Span('这是一个包含图像的文本 ');
let imageSpan = new ImageSpan(context, ResourceTable.Media_image);
let clickableSpan = new ClickableSpan({
    onClick: () => {
        console.log('图像被点击');
    }
});

imageSpan.setClickableSpan(clickableSpan);
span.addSpan(imageSpan);
text.setSpannableString(span);

在HarmonyOS鸿蒙Next中，Text组件支持通过属性字符串（AttributedString）嵌入图片。若要使图片响应交互事件，可以通过ClickableSpan实现。具体步骤如下：

  1. 创建AttributedString，并使用ImageSpan插入图片。
  2. 为图片部分设置ClickableSpan，重写onClick方法处理点击事件。
  3. 将AttributedString应用到Text组件。

示例代码：

AttributedString attributedString = new AttributedString("点击图片");
ImageSpan imageSpan = new ImageSpan(context, R.drawable.your_image);
ClickableSpan clickableSpan = new ClickableSpan() {
    @Override
    public void onClick(View widget) {
        // 处理点击事件
    }
};
attributedString.addSpan(imageSpan, 2, 3);
attributedString.addSpan(clickableSpan, 2, 3);
text.setAttributedText(attributedString);

确保Text组件启用点击事件：text.setMovementMethod(LinkMovementMethod.getInstance());。

回到顶部