【愚公系列】2023年12月 HarmonyOS教学课程 038-ArkUI事件（手势方法）

愚公搬代码

发布于 2025-06-02 16:52:12

14200

代码可运行

文章被收录于专栏：历史专栏历史专栏

运行总次数：0

代码可运行

🚀一、手势方法

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

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

手势操作	功能描述
滑动手势	在屏幕上快速滑动手指，可实现页面切换、滚动查看内容等功能
点击手势	轻触屏幕一次，可实现按钮点击、应用打开等功能
双击手势	连续快速点击屏幕两次，可实现放大图片、双击打开应用等功能
长按手势	在屏幕上长时间按住手指，可弹出上下文菜单或进行拖拽、复制等操作
捏合手势	使用两个手指在屏幕上同时向内或向外移动，可实现缩放、放大和缩小等功能
旋转手势	使用两个手指在屏幕上同时顺时针或逆时针旋转，可实现旋转图片、屏幕方向切换等功能
拖拽手势	长按住一个物体后，移动手指进行拖拽，可实现图标排序、文件移动等功能
双指滑动手势	使用两个手指在屏幕上同时滑动，可实现快速滚动、切换页面等操作

🔎1.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)
  }
}

🔎2.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)
  }
}

🔎3.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)
  }
}