如何为组件的不同触摸区域添加不同交互动作（通过Event坐标实现）

系统运维 2023-11-16 大猫 手机阅读

想了解更多关于开源的内容，请访问：

51CTO 开源基础软件社区

https://ost.51cto.com

场景说明

应用开发中经常需要给同一个组件划分不同的触摸热区，并且不同热区触发的操作也不同，比如阅读应用通常包含左右两个触摸热区，用户触摸左侧触发向后翻页，触摸右侧触发向前翻页；同样的，视频应用中，长按视频播放器的左侧触发快退播放，长按右侧触发快进播放等等。当前OpenHarmony提供的热区设置属性（responseRegion）只能在不同的触摸热区中触发相同的事件，那么如何实现不同热区不同事件呢，本例即以上述视频播放场景为例进行说明。

效果呈现

效果说明：开始时视频以正常速度播放，播放到5秒时，长按播放器右侧触发快进播放，播放到14秒时长按播放器左侧触发快退播放。

环境要求

本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：

  • IDE: DevEco Studio 4.0 Release
  • SDK: Ohos_sdk_public 4.0.10.13 (API Version 10 Release)

实现思路

几乎组件的所有触摸事件都会返回event，通过返回的event可以获取到触摸点的坐标位置，那么就可以根据坐标位置为不同的组件区域添加不同的交互动作。如图：假设有一个长度为200vp的组件，我们希望点击组件的左侧时触发事件A，点击组件的右侧时触发事件B，那么就可以通过触摸点的坐标来判断，当触摸点的x坐标{ this.updateTime = e.time }) .gesture( // 添加触摸手势 TapGesture({count:1}) .onAction((event:GestureEvent)=>{ if (this.isPlaying){ // 触摸触发播放 this.videoController.start() this.isPlaying = !this.isPlaying } else { // 再次触摸触发暂停 this.videoController.pause() this.isPlaying =!this.isPlaying } }) ) } }