百科网站程序,北京朝阳区租房,网站价格明细表,wordpress安装ssl证书1 概 述
手势事件是移动应用开发中最常见的事件之一#xff0c;鸿蒙提供了一些方法来绑定手势事件。通过给各个组件绑定不同的手势事件#xff0c;并设计事件的响应方式#xff0c;当手势识别成功时#xff0c;ArkUI框架将通过事件回调通知组件手势识别的结果。 …1 概 述
手势事件是移动应用开发中最常见的事件之一鸿蒙提供了一些方法来绑定手势事件。通过给各个组件绑定不同的手势事件并设计事件的响应方式当手势识别成功时ArkUI框架将通过事件回调通知组件手势识别的结果。
绑定手势事件的方法有三种a普通绑定b带优先级的绑定c并行手势绑定。下面分别讨论。
2 普 通 绑 定
普通的绑定方式接口定义如下
.gesture(gesture: GestureType, mask?: GestureMask)
其中GestureType是手势种类实例默认有如下取值 TapGesture点击手势支持单次点击、多次点击的识别。 LongPressGesture: 长按手势。 PanGesture: 平移手势(滑动距离小于5vp时触发) PinchGesture: 捏合手势 RotationGesture: 旋转手势 SwipGesture: 滑动手势(滑动最小速度为100vp/s时触发) GestureGroup: 将手势识别组合成一组支持连续识别并行识别和互斥识别
第二参数GestureMask是一个枚举分别有如下取值 Normal: 不屏蔽子组件的手势按照默认手势识别顺序进行识别 IgnoreInternal: 屏蔽子组件的手势包括子组件上系统内置的手势如子组件为List组件时内置的滑动手势同样会被屏蔽。
举例我们可以将点击手势TapGesture通过gesture手势绑定方法绑定到Text组件上。
// xxx.etsEntryComponentstruct Index { build() { Column() { Text(Gesture).fontSize(28) // 采用gesture手势绑定方法绑定TapGesture .gesture( TapGesture() .onAction(() { console.info(TapGesture is onAction); })) } .height(200) .width(250) }} 3 带优先级的绑定
带优先级的手势绑定接口定义如下
.priorityGesture(gesture: GestureType, mask?: GestureMask)。 接口中GestureType和GestureMask的参数与普通绑定的参数相同这里不再展开介绍。 在默认情况下当父组件和子组件使用普通gesture绑定同类型的手势时子组件优先识别通过gesture绑定的手势。当父组件使用priorityGesture绑定与子组件同类型的手势时父组件优先识别通过priorityGesture绑定的手势。
举例当父组件Column和子组件Text同时绑定TapGesture手势时父组件以带优先级手势priorityGesture的形式进行绑定时优先响应父组件绑定的TapGesture
// xxx.etsEntryComponentstruct 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) }} 4 并行手势绑定
接口定义如下
.parallelGesture(gesture: GestureType, mask?: GestureMask) 接口中GestureType和GestureMask的参数与普通绑定的参数相同这里不再展开介绍。 在默认情况下手势事件为非冒泡事件当父子组件绑定相同的手势时父子组件绑定的手势事件会发生竞争最多只有一个组件的手势事件能够获得响应。而当父组件绑定了并行手势parallelGesture时父子组件相同的手势事件都可以触发实现类似冒泡效果。
Demo
// xxx.etsEntryComponentstruct 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); })) }} 上面例子中如果我们想让父组件Column独自消费TapGesture则可以在绑定时添加第二个参数 GestureMask.IgnoreInternal 。代码如下
// xxx.etsEntryComponentstruct 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.IgnoreInternal) }} 此时控制台只有Column容器的日志打印。
由于篇幅原因后续我们继续讨论手势事件的其他场景。
