@Observerd和@ObjectLink的UI刷新问题 (HarmonyOS 鸿蒙Next)

@Observerd和@ObjectLink的UI刷新问题 (HarmonyOS 鸿蒙Next)

Parent Class

@Observed
export class ObservedArray<T> extends Array<T> {
   constructor(...args: T[]) {
      super(...args);
   }
}

Parent and Child Classes

@Observed
class Parent {
   age: number = 0
   name: string = 'AB'
   child: ObservedArray<string> = new ObservedArray<string>('aa', 'bb', 'cc')
}

@Observed
class Child {
   age: number = 10
   name: string = 'gg'
   friends: string[] = ['aa', 'bb', 'cc']
}

State Management

@State
parent: Parent = new Parent()
@State
child: Child = new Child() // these two cannot trigger UI refresh through this.child.friends or this.parent.child

ObservedArray Usage

@State
arr: ObservedArray<string> = new ObservedArray<string>('aa', 'bb', 'cc') // this property can auto-refresh UI on push

Complete Code Example

import { ObservedArray } from '../tabs/dropdowntabs/CustomTabContents'
import { hilog } from '@kit.PerformanceAnalysisKit'
import { MixedType, MyNodeController } from '../tabs/dropdowntabs/MyNodeController'

let TAG = 'StateDemo: ->'

@Observed
class Parent {
   age: number = 0
   name: string = 'AB'
   child: ObservedArray<string> = new ObservedArray<string>('aa', 'bb', 'cc')
}

@Observed
class Child {
   age: number = 10
   name: string = 'gg'
   child: string[] = ['aa', 'bb', 'cc']
}

class Boy {
   @Track age: number = 10
   @Track name: string = 'gg'
   @Track friends: ObservedArray<string> = new ObservedArray<string>('aa', 'bb', 'cc')
}

@Builder
function testbuilder(p: MixedType) {
   Column() {
      Button('  ').onClick(() => {
         if (p instanceof Parent) {
            let pp = p as Parent
            if (pp.name == 'Cage') {
               // pp.child.push('0_0')
               pp.child = [...pp.child, '0_0']
            }
            if (pp.age == 30) {
               pp.name = 'Cage'
            }
            pp.age = 30
            hilog.info(0x0001, TAG, 'testbuilder: ' + JSON.stringify(pp))
         } else if (p instanceof Child) {
            let pp = p as Child
            if (pp.name == 'XXX') {
               pp.child.push('0o0')
            }
            if (pp.age == 18) {
               pp.name = 'XXX'
            }
            pp.age = 18
            hilog.info(0x0001, TAG, 'testbuilder2: ' + JSON.stringify(pp))
         } else if (p instanceof ObservedArray) {
            let pp = p as ObservedArray<string>
            pp.push('~_~')
            hilog.info(0x0001, TAG, 'testbuilder4: ' + JSON.stringify(pp))
         } else {
            let pp = p as Boy
            if (pp.name == 'q_p') {
               pp.friends.push('0o0')
            }
            if (pp.age == 18) {
               pp.name = 'q_p'
            }
            pp.age = 18
            hilog.info(0x0001, TAG, 'testbuilder3: ' + JSON.stringify(pp))
         }
      })
   }
}

class OuterTabContentNodeCtrl2<T extends MixedType> extends MyNodeController {
   constructor(param: T) {
      super(wrapBuilder(testbuilder), param)
   }
}

@Component
struct Test {
   [@ObjectLink](/user/ObjectLink) parent: Parent

   aboutToAppear(): void {
      hilog.info(0x0001, TAG, 'aboutToAppear: ' + JSON.stringify(this.parent))
      this.parent.age = 50
      hilog.info(0x0001, TAG, 'aboutToAppear: ' + JSON.stringify(this.parent))
      this.parent.name = 'CD'
      hilog.info(0x0001, TAG, 'aboutToAppear: ' + JSON.stringify(this.parent))
      this.parent.child.pop()
      hilog.info(0x0001, TAG, 'aboutToAppear: ' + JSON.stringify(this.parent))
      this.parent.child.push('dd', 'ee')
      hilog.info(0x0001, TAG, 'aboutToAppear: ' + JSON.stringify(this.parent))
   }

   build() {}
}

@Entry
@Component
struct StateDemo {
   @State parent: Parent = new Parent()
   @State child: Child = new Child()
   @State boy: Boy = new Boy()
   @State arr: ObservedArray<string> = new ObservedArray<string>('aa', 'bb', 'cc')

   build() {
      Column() {
         Text(JSON.stringify(this.parent)).width('100%').fontSize(16).fontColor('black')
         NodeContainer(new OuterTabContentNodeCtrl2(this.parent))
         Text(JSON.stringify(this.child)).width('100%').fontSize(16).fontColor('black')
         NodeContainer(new OuterTabContentNodeCtrl2(this.child))
         Text('' + this.boy.friends)
            .width('100%')
            .fontSize(16)
            .fontColor('black')
         NodeContainer(new OuterTabContentNodeCtrl2(this.boy))
         Text(JSON.stringify(this.arr)).width('100%').fontSize(16).fontColor('black')
         NodeContainer(new OuterTabContentNodeCtrl2(this.arr))
      }
   }
}