HarmonyOS 使用foreach后页面未重新渲染?

代码如下,当this.showMouse值变化时,border的闪烁效果未生效。。

.transition(this.showMouse[index] && TransitionEffect.OPACITY.animation({ duration: 1100, iterations: -1 }))
HarmonyOS
2024-08-08 16:32:40
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
FengTianYa

原因是ForEach的使用造成的,在删除时,假设删除index=3的item,会导致index=3的item需要开始闪烁,但是按照原来的写法,ForEach不指定key,用的key是item和index的组合,由于item(里面存的true或false)发生了变化,所以index=3的key变化了,那么它会被重建,重新创建出新的component,新的component是第一次设置border,所以不会产生动画。关键代码如下:

ForEach(this.showPointArr, (item: boolean, index:number) => { 
  GridCol() { 
    Row() { 
      if (this.showPointArr[index]) { 
        Image($r('app.media.startIcon')) 
          .width(12) 
      } 
    }.width('100%').height('40').justifyContent(FlexAlign.Center) 
  } 
  // .animation(this.showMouse[index] ? {duration: 1100, iterations: -1} : {}) 
  .border(this.showMouse[index] ? this.btnCancelBorderActive : this.btnCancelBorder) 
  // .transition(this.showMouse[index] == true && TransitionEffect.OPACITY.animation({ duration: 1100, iterations: -1 })) 
  .animation(this.showMouse[index] ? {duration: 1100, iterations: -1} : {duration:0}) 
},(item:boolean,index:number)=>{return String(index)})
分享
微博
QQ
微信
回复
2024-08-08 20:29:26
相关问题
ForEach循环渲染的过程是什么样的
834浏览 • 1回复 待解决
在Stage模型下如何主动重新渲染UI
3437浏览 • 1回复 已解决
HarmonyOS Swiper+ForEach使用问题
361浏览 • 1回复 待解决
HarmonyOS 数据改变刷新页面
716浏览 • 0回复 待解决
HarmonyOS 密码登录页面做防截屏
281浏览 • 1回复 待解决
HarmonyOS VideoDecoder使用OpenGL渲染
170浏览 • 1回复 待解决
点击事件,@State 页面生效,在线等
2820浏览 • 0回复 待解决