【鸿蒙实战开发】基于手势绑定的常见问题处理

最新推荐文章于 2025-07-15 18:00:00 发布

原创

最新推荐文章于 2025-07-15 18:00:00 发布 · 1.1k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #鸿蒙开发 #移动开发 #组件化 #自定义控件 #应用开发

场景一：父子组件同时绑定手势的冲突处理

效果图

方案

在默认情况下，手势事件为非冒泡事件，当父子组件绑定相同的手势时，父子组件绑定的手势事件会发生竞争，最多只有一个组件的手势事件能够获得响应，默认子组件优先识别通过gesture绑定的手势。

当父组件使用priorityGesture绑定与子组件同类型的手势时，父组件优先识别通过priorityGesture绑定的手势，子组件的手势不会进行识别响应。
当父组件绑定了并行手势parallelGesture时，父子组件相同的手势事件都可以触发，实现类似冒泡效果（当前规格：当父组件和子组件同时绑定单击手势事件和双击手势事件时，父组件和子组件均只响应单击手势事件）。

核心代码


build() {

Column() {

Column() {

Text('TapGesture:' + this.priorityTestValue).fontSize(28)

.gesture(

TapGesture()

.onAction(() => {

this.priorityTestValue += '\n子组件响应'

}))

}

.height(300)

.width(250)

.padding(20)

.margin(20)

.border({ width: 3 })

// 设置为priorityGesture时，点击文本会忽略Text组件的TapGesture手势事件，优先识别父组件Column的TapGesture手势事件

.priorityGesture(

TapGesture()

.onAction((event?: GestureEvent) => {

this.priorityTestValue += '\n父组件响应'

}), GestureMask.IgnoreInternal)

Column() {

Text('TapGesture:' + this.parallelTestValue).fontSize(28)

.gesture(

TapGesture()

.onAction(() => {

this.parallelTestValue += '\n子组件响应'

}))

}

.height(300)

.width(250)

.padding(20)

.margin(20)

.border({ width: 3 })

// 设置为parallelGesture时，点击文本会同时触发子组件Text与父组件Column的TapGesture手势事件

.parallelGesture(

TapGesture()

.onAction((event?: GestureEvent) => {

this.parallelTestValue += '\n父组件响应'

}), GestureMask.Normal)

}

}