在HarmonyOS开发中，多个手势组合怎么用GestureGroup实现？

Question

在HarmonyOS里我看到有个 GestureGroup，说是可以组合多个手势一起用。有没有人用过这个？比如我要实现：点击 + 捏合 + 长按共存的组件，该怎么绑定？

Answer 1

据我所知，GestureGroup 是用来组合多个手势的一种高级用法，它可以让一个组件同时支持多种交互操作。你可以使用 GestureGroup 的 .setGesture() 来组合不同的手势：

let group = GestureGroup()
  .setGesture([
    TapGesture().onAction(() => console.info("点击触发")),
    LongPressGesture().onAction(() => console.info("长按触发")),
    PinchGesture().onAction((event: GestureEvent) => console.info(`缩放比例: ${event.scale}`))
  ], GestureMode.Parallel)

Image($r('app.media.image')).width('100%')
  .gesture(group)

GestureMode.Parallel 表示这些手势可以并行识别，也可以选择 Sequence 或 Exclusive 看具体业务需求。

Answer 2

在 HarmonyOS 开发中，使用GestureGroup实现点击、捏合、长按共存的组件绑定，可参考以下步骤：

1. 创建 GestureGroup 并设置识别模式
   首先创建一个GestureGroup实例，并根据需求设置其识别模式。如果希望这些手势能同时进行识别，互不影响，可设置为并行识别模式Parallel。示例代码如下：
   typescript
   import { GestureGroup, GestureMode, TapGesture, PinchGesture, LongPressGesture } from '@ohos.multimodalinput';

// 创建GestureGroup并设置为并行识别模式
const gestureGroup = new GestureGroup(GestureMode.Parallel);

2. 向 GestureGroup 中添加手势
   创建点击手势TapGesture、捏合手势PinchGesture和长按手势LongPressGesture的实例，并添加到GestureGroup中。示例代码如下：
   typescript
   // 创建点击手势
   const tapGesture = new TapGesture().onAction((event) => {
   // 点击手势触发的回调逻辑
   console.log('点击手势被触发');
   });
   gestureGroup.addGesture(tapGesture);

// 创建捏合手势
const pinchGesture = new PinchGesture().onActionUpdate((event) => {

// 捏合手势更新的回调逻辑，例如根据缩放比例更新组件大小等
console.log('捏合手势更新，缩放比例：' + event.scale);

}).onActionEnd((event) => {

// 捏合手势结束的回调逻辑
console.log('捏合手势结束');

});
gestureGroup.addGesture(pinchGesture);

// 创建长按手势
const longPressGesture = new LongPressGesture().onAction((event) => {

// 长按手势触发的回调逻辑
console.log('长按手势被触发');

});
gestureGroup.addGesture(longPressGesture);

3. 将 GestureGroup 绑定到组件
   最后，使用gesture方法将GestureGroup绑定到需要的组件上。示例代码如下：
   typescript
   @Entry
   @Component
   struct MyComponent {
   build() {

    Column() {
        // 这里可以是任何你想要绑定手势的组件，例如Text组件
        Text('点击、捏合、长按我')
            .fontSize(28)
            // 将GestureGroup绑定到Text组件
            .gesture(gestureGroup)
    }
    .height(200)
    .width(250)

   }
   }