输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
文档管理中心

HarmonyOS

输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
FAQ
FAQ应用框架开发UI框架组件使用如何设置customspan不同位置的点击事件

如何设置customspan不同位置的点击事件

更新时间: 2026-06-15 08:43

CustomSpan 是最小单位的组件。若需实现特定功能，建议在多个 CustomSpan 上分别进行。如果必须在同一 CustomSpan 上实现，可从点击事件回调的 ClickEvent 中，根据属性判断实际点击位置，从而做出差异化响应。示例代码如下：

收起
自动换行
深色代码主题
复制
  1. @Entry
  2. @Component
  3. struct Index {
  4.   controller: RichEditorController = new RichEditorController();
  5.   option: RichEditorOptions = { controller: this.controller };
  6. 

  7.   @Builder
  8.   comment() {
  9.     Row() {
  10.       Text() {
  11.         Span('123123123')
  12.         ImageSpan($r('app.media.startIcon')).width(20).height(20)
  13.         Span('ggggggggggggggggggggggxxxxxxxxxxxxxxxxxxxxxxx')
  14.       }
  15.       .maxLines(1)
  16.       .wordBreak(WordBreak.BREAK_ALL)
  17.       .textOverflow({ overflow: TextOverflow.Ellipsis })
  18.       .constraintSize({
  19.         maxWidth: '90%'
  20.       })
  21. 

  22.       Image($r('app.media.startIcon'))
  23.         .width(25)
  24.         .height(25)
  25.         .onClick(() => {
  26.           this.getUIContext().getPromptAction().showToast({
  27.             message: 'Click to delete'
  28.           })
  29.         })
  30.     }
  31.     .width('100%')
  32.     .align(Alignment.Center)
  33.     .padding({
  34.       top: 5,
  35.       bottom: 5
  36.     })
  37.     .borderRadius(20)
  38.     .backgroundColor(Color.Gray)
  39.   }
  40. 

  41.   build() {
  42.     Column() {
  43.       Column() {
  44.         RichEditor(this.option)
  45.           .onReady(() => {
  46.             this.controller.addBuilderSpan(() => this.comment())
  47.           })
  48.           .borderWidth(1)
  49.           .borderColor(Color.Green)
  50.           .width('100%')
  51.           .height('30%')
  52.       }
  53.       .borderWidth(1)
  54.       .borderColor(Color.Red)
  55.       .width('100%')
  56.       .height('70%')
  57.     }
  58.   }
  59. }
SetClickEventInCustomspan.ets
如何理解AspectRatio对布局的影响
自定义构建函数Builder与自定义组件component的使用区别以及限制是什么
相关推荐
文档Span组件响应组件外点击事件
文档SegmentButton如何设置点击回调事件
文档如何实现自定义分段按钮跟手滑动
文档custom_span.h
文档Select如何自定义按钮样式和内容
文档ArkUI_CustomSpanMetrics
文档如何让属性字符串字体大小随给定区域自适应变化
文档按钮 (Button)
文档如何模拟点击事件
文档如何获取Span的位置信息
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明
在 FAQ 中进行搜索
请输入您想要搜索的关键词