组件可见区域变化事件onVisibleAreaChange踩过的坑

组件可见区域变化事件onVisibleAreaChange踩过的坑

HarmonyOS
2024-06-11 20:44:02
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
沉默如海

应用市场详情页面,视频轮播图卡片,要求当视频滑动到屏幕可见区域之外时,要停止播放。实现这个功能,首先就想到了​组件可见区域变化事件onVisibleAreaChange​。但是在开发过程中,踩过如下的坑:当在video视频组件上挂载onVisibleAreaChange事件,当视频播放时,会无限高频触发onVisibleAreaChange事件(即使手指离开设备,不做任何操作)。

经过反复验证,发现当视频暂停播放时,视频组件可见区域变化事件onVisibleAreaChange监听正常,符合预期。只有当视频播放时,才会无限高频触发onVisibleAreaChange监听事件。猜想,通过对Text标签的内容动态定时器修改,并对Text标签挂载组件可见区域变化事件onVisibleAreaChange(如下代码),会有怎样的效果呢?结果发现同样也会触发高频触发onVisibleAreaChange事件。因此认为当Text标签内容变动/或者Video标签视频播放(即帧渲染时),都是会触发组件可见区域变化事件onVisibleAreaChange的。

@State des: string = ""; 
async aboutToAppear() { 
  setInterval(()=>{ 
    this.des=Date.now()+""; 
  }, 100) 
} 
 
Text(this.des) 
  .fontSize(20) 
  .width('100%') 
  .height('100%') 
  .onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => { 
    Logger.info(TAG, `onVisibleAreaChange isVisible=${isVisible}, currentRatio=${currentRatio}`); 
  })

经过确认,当存在页面重新构建刷新时,都会触发onVisibleAreaChange ,因为在代码逻辑中,video的点击事件中,有触发@State修饰的响应式数据变量存在修改,从而导致页面组件刷新,进而引起触发onVisibleAreaChange。

那么如何跳过这个坑呢?

既然组件可见区域变化事件onVisibleAreaChange,挂载在内容可变的Text/Video等标签上,会高频触发可能导致影响后续的处理逻辑,那么就把内容可变的Text/Video等标签包裹一层同等大小的容器(如Row,Column等),在把这个容器上挂载组件可见区域变化事件onVisibleAreaChange。

注意:即使在Video标签外包裹了一层同等大小的容器,并在这个容器上挂载组件可见区域变化事件onVisibleAreaChange,但当视频暂停/播放时,仍会各自触发一次挂载在容器组件的onVisibleAreaChange事件,触发@State修饰的响应式数据变量存在修改,从而导致页面组件刷新,进而引起触发onVisibleAreaChange。

已于2024-6-12 17:49:23修改
分享
微博
QQ
微信
回复
2024-06-12 17:45:09
相关问题
容器组件onVisibleAreaChange不生效
1802浏览 • 1回复 待解决
如何屏蔽弹窗外区域事件
2483浏览 • 1回复 待解决
Text组件布局界问题
1046浏览 • 1回复 待解决
panel组件点击区域问题
4799浏览 • 1回复 待解决
HarmonyOS 如何扩大组件点击区域
382浏览 • 1回复 待解决
如何设置父组件随子组件宽度变化
2149浏览 • 1回复 待解决