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

举报
愚公搬代码 发表于 2023/12/31 19:43:04 2023/12/31
【摘要】 🏆 作者简介,愚公搬代码🏆《头衔》:华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,51CTO博客专家等。🏆《近期荣誉》:2023年华为云十佳博主,2022年CSDN博客之星TOP2,2022年华为云十佳博主等。🏆《博客内容》:.NET、Java、...

🏆 作者简介,愚公搬代码
🏆《头衔》:华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,51CTO博客专家等。
🏆《近期荣誉》:2023年华为云十佳博主,2022年CSDN博客之星TOP2,2022年华为云十佳博主等。
🏆《博客内容》:.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
🏆🎉欢迎 👍点赞✍评论⭐收藏

🚀一、手势方法

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

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)
  }
}

在这里插入图片描述
注意GestureMask=GestureMask.IgnoreInternal时只会触发父组件的


🚀感谢:给读者的一封信

亲爱的读者,

我在这篇文章中投入了大量的心血和时间,希望为您提供有价值的内容。这篇文章包含了深入的研究和个人经验,我相信这些信息对您非常有帮助。

如果您觉得这篇文章对您有所帮助,我诚恳地请求您考虑赞赏1元钱的支持。这个金额不会对您的财务状况造成负担,但它会对我继续创作高质量的内容产生积极的影响。

我之所以写这篇文章,是因为我热爱分享有用的知识和见解。您的支持将帮助我继续这个使命,也鼓励我花更多的时间和精力创作更多有价值的内容。

如果您愿意支持我的创作,请扫描下面二维码,您的支持将不胜感激。同时,如果您有任何反馈或建议,也欢迎与我分享。

在这里插入图片描述

再次感谢您的阅读和支持!

最诚挚的问候, “愚公搬代码”

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。