HarmonyOS 如何实时更新ForEach里的自定义组件

@ObjectLink schema: ObservedMap<string, ResourceColor>

build() {
  Grid() {
    ForEach(this.monthData, (item: DateInfo) => {
      GridItem() {
        Day({
          itemBackgroundColor: this.schema.has(item.key) ? this.schema.get(item.key) : Color.Transparent,
          itemBorderColor: this.schema.has(item.key) ? Color.Black : $r('app.color.color56'),
          dateInfo: item,
          onDayClick: (dateInfo: DateInfo) => {
            this.onDayClick(dateInfo)
          }
        })
          .visibility(item.shouldNotDraw() ? Visibility.Hidden : Visibility.Visible)
      }
      .layoutWeight(1)
    }, (item: DateInfo): string => item.key)
  }
  .columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr')
  .rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr')
  .width(AppConstants.FULL_PERCENT)
  .height(216)
  .flingSpeedLimit(360)
  .margin({ top: 8 })
}

此处的schema会根据查询本地数据库的结果更新，那请问如何同步更新ForEach里的Day组件呢？

HarmonyOS

Heiang

2024-12-20 16:30:39

浏览

回答 1

待解决

回答 1

按赞同

按时间

superinsect

参考以下demo

@Observed class observerMap <k, v> extends Map<k, v> {

}

@Component
struct Day {
  @ObjectLink schema: observerMap<string, ResourceColor>
  @State title: string = ''
  build() {
    Text(this.title)
      .textAlign(TextAlign.Center)
      .backgroundColor(this.schema.has('key') ? this.schema.get('key') : Color.Orange)
  }
}


@Entry
@Component
struct Index2 {

  @State array: string[] = ['one','two']
  @State schema: observerMap<string, ResourceColor> = new observerMap<string, ResourceColor>()

  build() {
    Column({space:20}) {
      Button('observerMap change')
        .onClick(() => {
          this.schema.set('key', Color.Red)
        })

      Grid() {
        ForEach(this.array, (item:string, index:number)=> {
          GridItem() {
            Day({title:item,schema:this.schema})
          }
          .layoutWeight(1)
        })
      }
      .columnsTemplate('1fr 1fr')
      .rowsTemplate('1fr 1fr')
      .width('50%')
      .height(200)
      .flingSpeedLimit(360)
      .margin({ top: 8 })
    }
    .width('100%')
    .height('100%')
  }
}