HarmonyOS中的手势操作方法详解

更新：2024-05-09 08:46:03编辑：游戏资讯归类：攻略

应用程序的手势操作是指在移动设备上使用手指或手势进行与应用程序交互的方式。手势操作可以包括点击、滑动、双击、捏合等动作，用于实现不同的功能和操作。

HarmonyOS中常见的手势操作及其功能：

gesture（常规手势绑定方法）

接口说明：

.gesture(gesture: GestureType, mask?: GestureMask)

案例：

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('Gesture').fontSize(28)
        // 采用gesture手势绑定方法绑定TapGesture
        .gesture(
          TapGesture()
            .onAction(() => {
              console.info('TapGesture is onAction');
            }))
    }
    .height(200)
    .width(250)
  }
}

priorityGesture（带优先级的手势绑定方法）

在HarmonyOS中，可以使用priorityGesture方法来实现带有优先级的手势绑定。具体描述如下：

priorityGesture是一种带有优先级的手势绑定方法，用于在组件上绑定优先识别的手势。
默认情况下，当父组件和子组件使用gesture方法绑定相同类型的手势时，子组件优先识别通过gesture绑定的手势。
当父组件使用priorityGesture方法绑定与子组件同类型的手势时，父组件优先识别通过priorityGesture绑定的手势。

当父组件Column和子组件Text同时绑定TapGesture手势时，如果父组件使用priorityGesture绑定了TapGesture手势，那么父组件会优先响应这个手势，而子组件只有在父组件不处理该手势时才能响应它。

接口说明：

.priorityGesture(gesture: GestureType, mask?: GestureMask)。

案例：

// xxx.ets
@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('Gesture').fontSize(28)
        .gesture(
          TapGesture()
            .onAction(() => {
              console.info('Text TapGesture is onAction');
            }))
    }
    .height(200)
    .width(250)
    // 设置为priorityGesture时，点击文本区域会忽略Text组件的TapGesture手势事件，优先响应父组件Column的TapGesture手势事件
    .priorityGesture(
      TapGesture()
        .onAction(() => {
          console.info('Column TapGesture is onAction');
        }), GestureMask.IgnoreInternal)
  }
}

parallelGesture（并行手势绑定方法）

在默认情况下，手势事件是非冒泡事件，当父子组件绑定相同的手势时，父子组件绑定的手势事件会发生竞争，最多只有一个组件的手势事件能够获得响应。

然而，当父组件使用parallelGesture方法绑定并行手势时，父子组件绑定的相同手势事件都可以触发，实现了类似冒泡效果。这意味着在这种情况下，父组件和子组件可以同时响应绑定的手势事件。

通过使用parallelGesture方法，可以实现父子组件之间相同手势事件的并行触发，使得多个组件都能够处理相同的手势操作，提供更灵活和多样化的交互效果。

接口说明：

.parallelGesture(gesture: GestureType, mask?: GestureMask)

案例：

// xxx.ets
@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('Gesture').fontSize(28)
        .gesture(
          TapGesture()
            .onAction(() => {
              console.info('Text TapGesture is onAction');
            }))
    }
    .height(200)
    .width(250)
    // 设置为parallelGesture时，点击文本区域会同时响应父组件Column和子组件Text的TapGesture手势事件
    .parallelGesture(
      TapGesture()
        .onAction(() => {
          console.info('Column TapGesture is onAction');
        }), GestureMask.Normal)
  }
}