图文混排时Image组件交互事件无响应如何解决
=======================

#### 问题现象

使用Text组件的StyledString/MutableStyledString实现图文混排富文本展示功能，预计实现URL链接点击跳转能力，图片点击放大能力，以及文本样式展示能力，但在实现过程中发现，当设置StyledString/MutableStyledString的value值ImageAttachment或CustomSpan时，style参数不生效。

#### 背景知识

*   [属性字符串](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-styled-string)（StyledString/MutableStyledString）：是功能强大的标记对象，可用于字符或段落级别设置文本样式。通过将StyledString附加到文本组件，可以通过多种方式更改文本，包括修改字号、添加字体颜色、使文本可点击以及自定义方式绘制文本等。
*   [ImageAttachment](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-styled-string#imageattachment)：用来在属性字符串中添加图片时使用的图片对象。
*   [ImageSpan](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-imagespan)：Text、ContainerSpan组件的子组件，用于显示行内图片。

#### 问题定位

[属性字符串](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-styled-string)（StyledString/MutableStyledString）的constructor()构造函数，当value的类型为ImageAttachment或CustomSpan时，style参数不生效。需要设置style时，通过[setStyle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-styled-string#setstyle)等方法实现。

#### 分析结论

ImageAttachment需要通过setStyle()方法来设置style，并添加点击事件。或者也可以使用组件Span和ImageSpan代替属性字符串，添加点击事件实现交互事件。

#### 修改建议

通过setStyle()方法来设置style并绑定点击事件。

@Entry
@Component
struct StyledStringExample {
  controller: TextController \= new TextController();
  image: ImageAttachment \= new ImageAttachment({
    resourceValue: $r('app.media.startIcon'),
    size: { width: 50, height: 50 },
  });
  spanStyle: SpanStyle \= {
    start: 0,
    length: 1,
    styledKey: StyledStringKey.GESTURE,
    styledValue: new GestureStyle({
      onClick: () \=\> {
        console.info('clickGestureAttr object trigger click event');
      }
    })
  };
  arrayList: Array<StyleOptions\> = \[this.spanStyle\];
  mutableStyledString: MutableStyledString \= new MutableStyledString(this.image);

  onPageShow(): void {
  _  // 通过setStyle方法，给图片添加样式_
    this.mutableStyledString.setStyle(this.spanStyle);
    this.controller.setStyledString(this.mutableStyledString);
  }

  build() {
    Column() {
    _  // 点击图片出现弹窗_
      Text(undefined, { controller: this.controller })
        .borderWidth(1)
    }.padding(50)
  }
}