HarmonyOS 鸿蒙Next：ForEach循环刷新时Array的item顺利导入但index作为颜色数组下标混乱

HarmonyOS 鸿蒙Next：ForEach循环刷新时Array的item顺利导入但index作为颜色数组下标混乱

@Entry @Component struct Ani2 {

@State arr:string[]=[‘国内新闻’,‘国际新闻’,‘生活娱乐’,‘信息世界’] build() { Scroll() { Column() {
ForEach(this.arr, (item:string,index:number)=>{
scrollItems({text:item,colorID:index}).transition({type:TransitionType.All})
},(value:string)=>value)
} } .width(‘100%’) .height(‘100%’) .align(Alignment.Top)

} }

@Component struct scrollItems { @State flag: boolean = true text:string=’’ colorID:number=0
c:string=((index:number):string=>{
const colors:string[]=[‘255,0,0’,‘255,0,0’,‘255,0,0’,‘255,0,0’]
return colors[index]})(this.colorID)

build() { Column() { Text(this.text)
.width(‘100%’) .height(25) .margin({bottom:3}) .fontColor(this.c )

  Flex({
    direction: this.flag ? FlexDirection.Row : FlexDirection.Column, 
    justifyContent: FlexAlign.Start, 
    alignItems: ItemAlign.Start  
  }) { 

    Column() { 
    }
    .width(this.flag ? 80 : '100%')
    .height(this.flag ? 80 : 240)
    .borderRadius(4)
    .backgroundColor('#ffadcfff')
    .margin({ right: 7, bottom: 7 })


    Column() {
      Row() 
      .width('100%')
      .height(20)
      .backgroundColor('#ffadcfff')
      .borderRadius(4)
      .padding({ left: 10 })

      Row() 
      .width('70%')
      .height(20)
      .backgroundColor('#FFE8F0FF')
      .borderRadius(4)
      .padding({ left: 10 })
      .margin({ top: 10 }) 
      Row() 
      .width('75%')
      .height(20)
      .backgroundColor('#FFE8F0FF')
      .padding({ left: 10 })
      .borderRadius(4)
      .margin({ top: 10 })

      if (!this.flag){  
        Row() 
        .width('70%')
        .height(20)
        .backgroundColor('#FFE8F0FF')
        .borderRadius(4)
        .padding({ left: 10 })
        .margin({ top: 10 }) 

        Row() 
        .width('75%')
        .height(20)
        .backgroundColor('#FFE8F0FF')
        .padding({ left: 10 })
        .borderRadius(4)
        .margin({ top: 10 }) 
        Row() 
        .width('75%')
        .height(20)
        .backgroundColor('#FFE8F0FF')
        .padding({ left: 10})
        .borderRadius(4)
        .margin({ top: 10 })
      }
    }
    .alignItems(HorizontalAlign.Start)
  }
  .width('100%') 
  .height(this.flag ? 95 : 430) 
  .padding({ top:7,left:7,bottom:7,right:7 })
  .margin({ bottom: 5 })
  .borderRadius(8)
  .shadow({ radius: 10, color: 'rgba(0,0,0,1)' }) 
  .onClick(()=>{
    animateTo({ duration: 500, curve: Curve.FastOutSlowIn }, ()=>{
      this.flag = !this.flag
    })
  })
}
.width('100%') 
.padding({ left: 20, right: 20 })
.margin({ top: 20 })

} }