HarmonyOS 鸿蒙Next手势概念和基本使用方式介绍

HarmonyOS 鸿蒙Next手势概念和基本使用方式介绍 开放求职 | 远程/南京鸿蒙开发岗位

尊敬的读者，

首先，衷心感谢您对我的博文的持续关注和支持。写作旅程中得到您的认可和反馈，对我而言是莫大的鼓励。目前，我正寻求新的职业发展机会，特别是在远程工作或南京地区的鸿蒙开发岗位。

我对于鸿蒙开发有着浓厚的兴趣和实践经验，热衷于探索和利用这一平台的潜力，为用户创造价值。如果您的组织或您所了解的企业正在寻找充满热情、技术熟练的鸿蒙开发人才，请不吝赐教。

• 微信号：13956233265

我真诚希望能够通过我的专业技能和热情为贵组织带来新的视角和价值。无论结果如何，我都将深感荣幸能够得到您的考虑和回应。

感谢您抽出宝贵时间阅读此信息。期待有机会与您进一步交流。

最诚挚的，yarnb

概念介绍

首先，让我们理解什么是手势。想象一下，有一块屏幕，用户通过手指与这块屏幕进行交互。这种交互发生在各种组件上，每个组件都定义了自己如何响应不同的手势，以及触发这些手势的时机。系统负责判断用户的手势与组件预定义的手势是否匹配。一旦匹配成功，就会触发相应的手势回调。

使用方式

手势的使用主要通过组件属性的链式调用。首先，开发者需要绑定识别手势的类型。手势识别类型可以是普通、优先绑定或冒泡绑定。优先绑定会让某个手势在父组件上有更高的响应优先级，忽略同类型的子组件手势。而冒泡绑定则是子组件先响应，随后是父组件。普通绑定是不会进行冒泡的。接下来，开发者需要传递手势的识别参数，这包括点击、长按、平移、捏合、旋转和滑动等类型。其中平移关注的是手指移动的距离，而滑动则关注速度。

下面的代码介绍了手势绑定方式的父子调用顺序和优先级关系

@Entry
@Component
struct GestureDemo {
  @State priorityTestValue: string = ''
  @State parallelTestValue: string = ''
  @State testValue: string = ''

  build() {
    Column() {
      Column() {
        Text('TapGesture:' + this.priorityTestValue).fontSize(28)
          .gesture(
            TapGesture()
              .onAction(() => {
                this.priorityTestValue += '\nText'
              }), GestureMask.Normal)
      }
      .height(200)
      .width(250)
      .padding(20)
      .margin(20)
      .border({ width: 3 })
      // 设置为priorityGesture时，点击文本会忽略Text组件的TapGesture手势事件，优先识别父组件Column的TapGesture手势事件
      .priorityGesture(
        TapGesture()
          .onAction((event: GestureEvent) => {
            this.priorityTestValue += '\nColumn'
          }), GestureMask.Normal)

      Column() {
        Text('TapGesture:' + this.parallelTestValue).fontSize(28)
          .gesture(
            TapGesture()
              .onAction(() => {
                this.parallelTestValue += '\nText'
              }), GestureMask.Normal)
      }
      .height(200)
      .width(250)
      .padding(20)
      .margin(20)
      .border({ width: 3 })
      // 设置为parallelGesture时，点击文本会同时触发子组件Text与父组件Column的TapGesture手势事件
      .parallelGesture(
        TapGesture()
          .onAction((event: GestureEvent) => {
            this.parallelTestValue += '\nColumn'
          }), GestureMask.Normal)

      Column() {
        Text('TapGesture:' + this.testValue).fontSize(28)
          .gesture(
            TapGesture()
              .onAction(() => {
                this.testValue += '\nText'
              }), GestureMask.Normal)
      }
      .height(200)
      .width(250)
      .padding(20)
      .margin(20)
      .border({ width: 3 })
      // 设置为TapGesture时，点击文本只触发子组件，事件不冒泡
      .gesture(
        TapGesture()
          .onAction((event: GestureEvent) => {
            this.testValue += '\nColumn'
          }), GestureMask.Normal)
    }
  }
}

手势类型可以组合使用，这种组合有三种模式：顺序、互斥和并发。顺序模式下，前一个手势识别失败则后续都失败；互斥模式是一种竞争状态，多个手势同时识别，一旦有一个成功，其他都将失败；并发模式允许多个手势同时识别，互不干扰。此外，手势识别还可以通过标记量来决定是否屏蔽子组件内的手势，包括内置手势。

不同的手势类型在触发时会注入不同的手势事件对象，这些对象的参数根据手势类型的不同而不同，允许用户根据这些参数进行业务上的判断和处理。