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%')  
  }  
}

子组件:

@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'))  
      })  
    }  
  }  
}

使用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;  
  }  
}
分享
微博
QQ
微信
回复
2024-09-24 17:57:13
相关问题
数组嵌套数组场景懒加载实现
623浏览 • 1回复 待解决
ForEach数组发生改变。UI刷新
547浏览 • 1回复 待解决
数组元素变更如何触发刷新list?
339浏览 • 1回复 待解决
readonly修饰数组无法获取数组元素
2010浏览 • 1回复 待解决
HarmonyOS 主线程刷新UI
248浏览 • 1回复 待解决
HarmonyOS 二维数组刷新问题
300浏览 • 1回复 待解决
HarmonyOS UI刷新问题
509浏览 • 0回复 待解决
UI预览不会自动刷新, 且刷新较慢
568浏览 • 1回复 待解决
class二次刷新渲染数组
718浏览 • 1回复 待解决
嵌套Class属性变化无法触发UI渲染
269浏览 • 1回复 待解决