赞
踩
首先,组件上如果同时有tap和click两种事件,那么组件会响应click事件
给组件添加tap点击事件,直接调用gesture属性方法即可,里边传入一个TapGesture对象
- Text(this.message)
- .fontSize(50)
- .fontWeight(FontWeight.Bold)
- .gesture(
- TapGesture()
- .onAction(() => {
- console.log(' gesture test onAction text')
- }))
当父组件绑定了tap事件,子组件也绑定了tap事件时,响应子组件的tap事件
当我们需要在父组件中拦截子组件的tap事件时就需要用到priorityGesture属性方法,官方文档中解释里边需要两个参数,一个是手势事件,一个是是否屏蔽子组件的手势。
- Column() {
- Text(this.message)
- .fontSize(50)
- .fontWeight(FontWeight.Bold)
- .gesture(TapGesture().onAction(() => {
- console.log(' gesture test onAction text')
- }))
- }
- .priorityGesture(
- TapGesture()
- .onAction(() => {
- console.log(' gesture test tap Column')
-
- }),
- //设置是否屏蔽子组件的tap事件
- GestureMask.Normal
- )

其中第二个参数,我在测试的过程中发现并不是如下官网解释
注意⚠️:实际测试中,当我设置了Normal,子组件(Text)依然无法响应tap事件,也就是无论我设置Normal还是IgnoreInternal,tap事件只响应父组件(Column)的事件。
如上,我通过设置GestureMask.Normal无法达到父子组件的tap事件同时响应。但是,如果我需要两者都响应tap事件,那么我可以借助parallelGesture属性方法
- Column() {
- Text(this.message)
- .fontSize(50)
- .fontWeight(FontWeight.Bold)
- .gesture(TapGesture().onAction(() => {
- console.log(' gesture test onAction text')
- }))
- }
- .parallelGesture(
- TapGesture()
- .onAction(() => {
- console.log(' gesture test tap parallelGesture')
- })
- )
设置了Text文本的tap手势,并且设置了Column的parallelGesture属性方法。这样Text和Column的Tap事件都可以响应了。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。