🚀一、手势方法
应用程序的手势操作是指在移动设备上使用手指或手势进行与应用程序交互的方式。手势操作可以包括点击、滑动、双击、捏合等动作,用于实现不同的功能和操作。
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时只会触发父组件的
看完三件事❤️
- 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
- 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
- 关注作者龚众皓: 『 蜀道衫 』,不定期分享原创知识。
- 关注后回复【666】扫码即可获取学习文档。
- 同时可以期待后续文章ing🚀。