HarmonyOS UI不刷新

@Observed
export class FaultReportSortItemBean {
  @Track dValue?:string
  @Track dKey?:string
  @Track id?:string
  @Track ifSelected?:boolean = false
}

父组件里:

@State sortItemArr: Array<FaultReportSortItemBean> = []

FaultReportViewModel.getCouponList(map, true, true, true).then(res => {
  let array = res.data as Array<FaultReportSortItemBean>
  for (let index = 0; index < array.length; index++) {
    const element = array[index];
    this.sortItemArr.push(element!)//获取到数据push进去
  }
})

Grid() {
  ForEach(this.sortItemArr, (itemModel: FaultReportSortItemBean, index: number) => {
    GridItem() {
      sortItemView({ itemModel: itemModel })
    }
    .width('calc(50% - 5vp)')
    .height(36)
    .onClick(() => {
      itemModel.ifSelected = !itemModel.ifSelected//不会刷新子组件里的ui
    })
  })
}

子组件:

@Component
export struct sortItemView {
  @ObjectLink itemModel: FaultReportSortItemBean
  build() {
    Column() {
      Button(this.itemModel.dKey, { type: ButtonType.Normal, stateEffect: false })
        .height('100%')
        .width('100%')
        .fontColor(this.itemModel.ifSelected == true ? Color.White : '#999999')
        .fontSize(14)
        .backgroundColor(Color.Transparent)
        .borderWidth(this.itemModel.ifSelected == true ? 0 : 1)
        .borderColor(this.itemModel.ifSelected == true ? Color.Transparent : '#999999')
        .borderRadius(10)
      Image(this.itemModel.ifSelected == true ? $r('app.media.btnCommon') : '')
    }
    .width('100%')
    .height('100%')
  }
}

为什么点击事件不刷新ui

HarmonyOS

aquaa

2024-12-24 18:12:22

浏览

回答 1

待解决

回答 1

按赞同

按时间

FengTianYa

可以用Repeat来代替foreach，下面是实现的demo：

@Observed
export class FaultReportSortItemBean {
  @Track dValue?:string
  @Track dKey?:string
  @Track id?:string
  @Track ifSelected?:boolean = false
}

@Entry
@Component
struct Index {
  @State sortItemArr: Array<FaultReportSortItemBean> = [
    {
      dValue: '1',
      dKey: '1',
      id: '1',
      ifSelected: false
    },
    {
      dValue: '2',
      dKey: '2',
      id: '2',
      ifSelected: false
    },
    {
      dValue: '3',
      dKey: '3',
      id: '3',
      ifSelected: true
    },
    {
      dValue: '4',
      dKey: '4',
      id: '4',
      ifSelected: false
    }
  ]


  build() {

    Grid() {
      Repeat<FaultReportSortItemBean>(this.sortItemArr)
        .each((obj: RepeatItem<FaultReportSortItemBean>)=>{
          GridItem() {
            sortItemView({ itemModel: obj.item})
          }
          .width('calc(50% - 5vp)')
          .height(36)
          .onClick(() => {
            obj.item.ifSelected = !obj.item.ifSelected
            console.log(JSON.stringify(obj))
          })
        })
        .key((item: FaultReportSortItemBean) => item.id)
    }
  }
}

@Component
export struct sortItemView {
  @ObjectLink itemModel: FaultReportSortItemBean
  build() {
    Column() {
      Button(this.itemModel.dKey, { type: ButtonType.Normal, stateEffect: false })
        .height('100%')
        .width('100%')
        .fontColor(this.itemModel.ifSelected == true ? Color.White : '#999999')
        .fontSize(14)
        .backgroundColor(Color.Transparent)
        .borderWidth(this.itemModel.ifSelected == true ? 0 : 1)
        .borderColor(this.itemModel.ifSelected == true ? Color.Transparent : '#999999')
        .borderRadius(10)
      Image(this.itemModel.ifSelected == true ? '11111' : '')
    }
    .width('100%')
    .height('100%')
  }
}

参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-rendering-control-repeat-V5

2024-12-24 20:03:49

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS UI不刷新

订阅鸿蒙技术特刊，精选内容抢先看