Text绑定自定义菜单
===========

#### 问题现象

Text组件绑定自定义菜单如何实现以下效果：

*   bindSelectionMenu展示的菜单在用户触碰屏幕时自动消失。
*   长按出现自定义菜单，双击手势不出现默认菜单。

问题效果预览：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/95/v3/VycHdmELR7S69-C6mIMM5g/zh-cn_image_0000002658795071.png?HW-CC-KV=V1&HW-CC-Date=20260709T133917Z&HW-CC-Expire=86400&HW-CC-Sign=0E2A12889BE262B77370DB84861CE46AA08E8A8DA6E34D7A5601DEA0AF7593E0 "点击放大")

#### 效果预览

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/40/v3/UHS5Z8rQQmCU0mIpMR0CSw/zh-cn_image_0000002628555700.png?HW-CC-KV=V1&HW-CC-Date=20260709T133917Z&HW-CC-Expire=86400&HW-CC-Sign=5C1F765D6B7AF2BDD8D12D546360FBD827D9F840714F096C90DED9E4EF64D320 "点击放大")

#### 背景知识

*   [绑定手势方法](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-gesture-settings)为组件绑定不同类型的手势事件，并设置事件的响应方法。
*   [bindSelectionMenu](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-text#bindselectionmenu11)方法能设置Text自定义选择菜单，使用方法可参考[文本绑定自定义菜单](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-text#示例8文本绑定自定义菜单)。

#### 解决方案

*   在页面最外层组件添加点击事件，关闭菜单，实现触摸屏幕菜单消失的效果。
*   双击手势出现默认菜单是系统默认规格，可以为Text组件绑定双击事件覆盖默认行为。

@Entry
@Component
struct BindMenuPage {
  controller: TextController \= new TextController();

  build() {
    Column() {
      Text(undefined, { controller: this.controller }) {
        Span('Hello World');
        ImageSpan($r('app.media.startIcon')) _// 图片资源需自行替换_
          .width('100px').height('100px');
      }
      .parallelGesture(
     _   // 重写双击手势事件，关闭菜单_
        TapGesture({ count: 2 })
          .onAction(() \=\> {
            this.controller.closeSelectionMenu();
          }), GestureMask.Normal)
      .copyOption(CopyOptions.InApp)
   _   // 设置TextResponseType.LONG\_PRESS，可以通过长按方式弹出自定义菜单_
      .bindSelectionMenu(TextSpanType.DEFAULT, this.LongPressImageCustomMenu, TextResponseType.LONG\_PRESS);
    }.width('100%').height('100%')
    .justifyContent(FlexAlign.Center)
    .onClick(() \=\> {
   _   // 在页面根节点设置点击事件，关闭菜单_
      this.controller.closeSelectionMenu(); _//_ _关闭菜单_
    });
  }

  @Builder
  LongPressImageCustomMenu() {
    Column() {
      Menu() {
        MenuItemGroup() {
     _     // 图片资源需自行替换_
          MenuItem({ startIcon: $r('app.media.startIcon'), content: 'Long Press Image Menu 1', labelInfo: '' });
          MenuItem({ startIcon: $r('app.media.startIcon'), content: 'Long Press Image Menu 2', labelInfo: '' });
          MenuItem({ startIcon: $r('app.media.startIcon'), content: 'Long Press Image Menu 3', labelInfo: '' });
        };
      }
      .backgroundColor('#F0F0F0');
    };
  }
}