# 实现Text长按和点击弹出不同的菜单

#### 问题现象

Text组件绑定了bindPopup和bindMenu，想要长按显示bindMenu，点击显示bindPopup，该如何实现？  

#### 背景知识

* [bindPopup](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-popup#bindpopup)：为组件绑定Popup气泡。
* [bindMenu](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-menu#bindmenu)：给组件绑定菜单，点击后弹出菜单。
* [LongPressGesture](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-gestures-longpressgesture#longpressgesture-1)：创建长按手势对象。
* [TapGesture](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-gestures-tapgesture)：创建点击手势对象。

#### 解决方案

使用组合手势中的互斥手势[GestureMode.Exclusive](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-combined-gestures#gesturemode枚举说明)来实现长按手势[LongPressGesture](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-gestures-longpressgesture)触发弹出bindMenu，点击手势[TapGesture](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-gestures-tapgesture)触发弹出bindPopup。

```
@Entry
@Component
struct GestureGroupDemo {
  @State isMenu: boolean = false;
  @State isPopup: boolean = false;

  @Builder
  bindMenuBuilder() {
    Row() {
      Text('MenuContent');
    }.backgroundColor(Color.Pink);
  }

  @Builder
  bindPopupBuilder() {
    Row() {
      Text('PopupContent');
    }.backgroundColor(Color.Orange);
  }

  build() {
    RelativeContainer() {
      Button('长按或者点击')
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .fontSize(28)
        .gesture(
          GestureGroup(GestureMode.Exclusive,
            LongPressGesture({ repeat: true })
              .onAction(() => {
                this.isPopup = false;
                this.isMenu = true;
              }),
            TapGesture({ count: 1, fingers: 1 })
              .onAction(() => {
                this.isMenu = false;
                this.isPopup = !this.isPopup;
              }))
        )
        .bindContextMenu(this.isMenu, this.bindMenuBuilder())
        .bindPopup(this.isPopup, {
          builder: this.bindPopupBuilder(), onStateChange: (e) => {
            if (!e.isVisible) {
              this.isPopup = false;
            }
          },
        });
    }
    .width('100%')
    .height('100%');
  }
}
```