HarmonyOS 嵌套数组元素的UI刷新方案

HarmonyOS  嵌套数组元素的UI刷新方案。

HarmonyOS
2024-09-24 11:45:47
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
FengTianYa

ArrayPage.ets:

@Entry  
@Component  
struct ArrayPage {  
  @State info: DataBean = new DataBean(1, "qq", [  
    new DataBeanItem(11, 'qq11')  
  ]);  
  @State infos: DataBean[] = [];  
  
  @Builder  
  itemHead(databean: DataBean) {  
    Text(`id:${databean.id} name:${databean.name}`)  
  }  
  
  build() {  
    Row() {  
      Column() {  
        List() {  
          ListItemGroup({ header: this.itemHead(this.info) }) {  
            ForEach(this.info.items, (item: DataBeanItem) => {  
              ListItem() {  
                Text(`childinfo: ${item.childName}`)  
              }  
            })  
          }  
        }  
  
        Button('添加二层数据1').onClick(() => {  
          this.info.items = this.info.items.concat([new DataBeanItem(12, 'qq12')])  
        })  
        Button('添加二层数据2').onClick(() => {  
          this.info.items.push(new DataBeanItem(12, 'qq12'))  
        })  
  
        List() {  
          ForEach(this.infos, (info: DataBean) => {  
            ListItemGroup({ header: this.itemHead(info) }) {  
              RecordItem({ info: info })  
            }  
          })  
        }  
  
        Button('添加一层数据1').onClick(() => {  
          this.infos = [  
            new DataBean(1, 'ww', []),  
            new DataBean(2, 'rr', [new DataBeanItem(21, 'rr21')])  
          ]  
        })  
  
        Button('添加一层数据2').onClick(() => {  
          this.infos.push(new DataBean(3, 'ww', []), new DataBean(4, 'rr', [new DataBeanItem(41, 'rr21')]))  
        })  
      }  
      .width('100%')  
    }  
    .height('100%')  
  }  
}
  • 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.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.

子组件:

@Component  
export struct RecordItem {  
  @ObjectLink info: DataBean;  
  
  build() {  
    Column() {  
      ForEach(this.info.items, (item: DataBeanItem) => {  
        ListItem() {  
          Text(`childinfo: ${item.childName}`)  
        }  
      })  
  
      Button('添加二层数据1').onClick(() => {  
        this.info.items = this.info.items.concat([new DataBeanItem(12, 'qq12')])  
      })  
      Button('添加二层数据2').onClick(() => {  
        this.info.items.push(new DataBeanItem(12, 'qq12'))  
      })  
    }  
  }  
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.

使用ObjectLink时需要标注的对象。

@Observed  
export class DataBean {  
  id: number = 0;  
  name: string = '';  
  items: DataBeanItem[] = [];  
  
  constructor(id: number, name: string, items: DataBeanItem[]) {  
    this.id = id;  
    this.name = name;  
    this.items = items;  
  }  
}  
  
@Observed  
export class ArrayDataBeanItem extends Array<DataBeanItem>{  
  
}  
  
@Observed  
export class DataBeanItem {  
  childId: number = 0;  
  childName: string = '';  
  
  constructor(childId: number, childName: string) {  
    this.childId = childId;  
    this.childName = childName;  
  }  
}
  • 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.
分享
微博
QQ
微信
回复
2024-09-24 17:57:13
相关问题
数组嵌套数组场景懒加载实现
844浏览 • 1回复 待解决
ForEach数组发生改变。UI刷新
1232浏览 • 1回复 待解决
数组元素变更如何触发刷新list?
581浏览 • 1回复 待解决
readonly修饰数组无法获取数组元素
2651浏览 • 1回复 待解决