HarmonyOS HashMap中放入数组,数组数据发生改变时如增加或者删除元素,如何触发UI刷新

定义一个HashMap:

@State allChannelsMaps: HashMap<string, Array<ChannelGroupDataChannelList>> = new HashMap();
UI布局如下:
List(){
          ForEach(this.channelTypeList, (channelData: ChannelTypeEntityData, index: number) =>{
            ListItem(){
              this.channelGrid(this.allChannelsMaps.get(channelData.channelType?.toString()),
                index,)
            }
          })
        }.width('100%')
.height('100%')
@Builder channelGrid(channelGroupData: Array<ChannelGroupDataChannelList>, index: number){
Grid(){
          ForEach(channelGroupData, (channel: ChannelGroupDataChannelList, index: number) =>{
            GridItem() {
              Text(channel.channelName)
                .fontSize((channel.channelName ?? '').length > 5 ? '11fp': '15fp')
                .fontColor($r('app.color.color202022'))
                .fontFamily(CommonConstants.SI_YUAN)
                .textAlign(TextAlign.Center)
                .width(this.itemWidth)
                .height(this.itemHeight)
                .backgroundColor($r('app.color.colorF9F9F9'))
                .borderRadius(4)
                .onClick(() =>{
                  const tapChannel: ChannelGroupDataChannelList = channelGroupData[index];
                  this.addChannelUpdateMap(tapChannel);
                })
            }
          })
        }
        .columnsTemplate('1fr 1fr 1fr 1fr')
        .columnsGap(10)
        .rowsGap(10)
        .height(this.channelTypeList[index].channelHeight)
        .nestedScroll({
          scrollForward: NestedScrollMode.PARENT_FIRST,
          scrollBackward: NestedScrollMode.SELF_FIRST
        })
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
HarmonyOS
2024-12-20 16:35:40
1183浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
superinsect

参考以下demo:

import HashMap from '@ohos.util.HashMap'
class  DataItem {
  title:string;
  id:number
  constructor(title:string,id:number) {
    this.title = title;
    this.id = id
  }
}
@Entry
@Component
struct MapExample {
  @State hashMap: HashMap<string, Array<DataItem>>= new HashMap();
  @State keys:Array<string> =[ ]
  aboutToAppear(): void {
    this.hashMap.set("squirrel", [new DataItem("123",20)]);
    this.hashMap.set("sparrow", [new DataItem("human",45)]);
    this.keys = Array.from(this.hashMap.keys());
    console.info('valuesaaa',this.hashMap.values())
    for (let key of  this.keys) {
      console.log("key:" + key);
      console.log("value:" + this.hashMap.get(key));
    }
  }
  build(){
    List(){
      ForEach(this.keys , (item: string, index: number) =>{
        ChildItem({item:item})
      },(item:string)=>item)
    }
  }
}
@Component
struct ChildItem {
  @Prop item: string;
  build() {
    Text(this.item)
      .fontSize(50)
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
分享
微博
QQ
微信
回复
2024-12-20 19:03:02


相关问题
ForEach数组发生改变UI刷新
1230浏览 • 1回复 待解决
数组元素变更如何触发刷新list?
581浏览 • 1回复 待解决
HarmonyOS 嵌套数组元素UI刷新方案
705浏览 • 1回复 待解决
HarmonyOS 数组对象数据刷新
466浏览 • 1回复 待解决
readonly修饰的数组无法获取数组元素
2651浏览 • 1回复 待解决