【愚公系列】2023年12月 HarmonyOS教学课程 038-ArkUI事件(手势方法)
🏆 作者简介,愚公搬代码
🏆《头衔》:华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,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元钱的支持。这个金额不会对您的财务状况造成负担,但它会对我继续创作高质量的内容产生积极的影响。
我之所以写这篇文章,是因为我热爱分享有用的知识和见解。您的支持将帮助我继续这个使命,也鼓励我花更多的时间和精力创作更多有价值的内容。
如果您愿意支持我的创作,请扫描下面二维码,您的支持将不胜感激。同时,如果您有任何反馈或建议,也欢迎与我分享。
再次感谢您的阅读和支持!
最诚挚的问候, “愚公搬代码”
- 点赞
- 收藏
- 关注作者
评论(0)