数组对象,应用会根据开发需要,封装自己的数据模型。其中涉及到多层嵌套的情况。

应用会根据开发需要,封装自己的数据模型。其中涉及到多层嵌套的情况。

HarmonyOS
2024-05-23 23:34:22
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
热辣牛奶

@Observed装饰器和@ObjectLink装饰器,观察对象数组中对象属性值的变化,观察数组的UI刷新。

核心代码解释

@Observed 
class type extends Array<Person> { 
} 
  
@Observed 
class Person { 
  name: string 
  age: number 
  changed: boolean 
  
  constructor(name: string, age: number, changed: boolean) { 
    this.name = name 
    this.age = age 
    this.changed = changed 
  } 
} 
  
@Component 
struct ItemView1 { 
  @ObjectLink person1: type 
  build() { 
    Column() { 
      Text(JSON.stringify(this.person1)) 
    } 
  } 
} 
  
@Component 
struct ItemView { 
  @ObjectLink person: Person 
  
  build() { 
    Column(){ 
      Row() { 
        Text(this.person.name).itemText(this.person.changed) 
        Blank() 
        Text(this.person.age.toString()).itemText(this.person.changed) 
      } 
      .width('100%') 
      .height(50) 
      .padding(5) 
      .backgroundColor('#F7F8FA') 
      .onClick(() => { 
        this.person.age++ 
        this.person.changed = true 
      }) 
    } 
  } 
} 
  
@Entry 
@Component 
struct ObjectArrDemo2Page { 
  
  @State per1:Person = new Person('Roes', 12, false); 
  @State persons: Person[] = [this.per1] 
  
  private count: number = 0 
  build() { 
    Column({ space: 10 }) { 
      ItemView1({person1:[this.per1]}) 
  
      List({ space: 5 }) { 
        ForEach(this.persons, (item: Person, index: number) => { 
          ListItem() { 
            ItemView({ person: item }) 
          } 
        }) 
      } 
    } 
    .width('100%') 
    .height('100%') 
    .padding(5) 
  } 
} 
  
@Extend(Text) 
function itemText(changed: boolean) { 
  .fontSize(22) 
  .fontColor(changed ? '#21A3A1' : '#000000') 
}
分享
微博
QQ
微信
回复
2024-05-24 23:21:19
相关问题
如何测试自己开发应用
2425浏览 • 1回复 待解决
数组嵌套数组场景懒加载实现
636浏览 • 1回复 待解决