Parent Component Triggering Child Component Methods, List Gap Issues, Page Show/Hide, Dynamic JSON Modification

[Daily HarmonyOS Next Knowledge] Parent Component Triggering Child Component Methods, List Gap Issues, Page Show/Hide, Dynamic JSON Modification, C API Calls

1. How does a HarmonyOS parent component trigger a method defined in a child component?

Define a controller class with methods matching those in the child component. Pass the actual child methods to the controller instance.

The parent component creates a controller instance, passes it to the child, and invokes controller methods as needed. Example:

@Component
struct Child {
  @State private text: string = 'Initial Value'
  private controller: ChildController = new ChildController();

  aboutToAppear() {
    if (this.controller) {
      this.controller.changeText = this.changeText
    }
    console.log('aaa')
  }

  private changeText = (value: string) => {
    this.text = value
    console.log('bbb')
  }

  build() {
    Column() {
      Text(this.text)
    }
  }
}

class ChildController {
  changeText = (value: string) => {
    console.log('11111')
  }
}

export let ChildRef = new ChildController()

@Entry
@Component
struct Parent {
  // ChildRef = new ChildController()
  @State noShow: boolean = false
  build() {
    Column() {
      Text('Access Child\'s exposed methods!').fontSize('18vp').fontColor(Color.Gray)
      Divider()
      Child({ controller: ChildRef })
      Child()
      Button('Parent invokes child\'s changeText').onClick(() => {
        ChildRef.changeText('Parent called child\'s changeText')
      })
    }
  }
}

2. After setting .sticky(StickyStyle.Header) on a HarmonyOS List, a gap sometimes appears at the top during scrolling, showing list content behind.

Add the .pixelRound attribute with downward rounding:

List()
  .sticky(StickyStyle.Header)
  .pixelRound(PixelRoundMode.Floor) // Resolves gap issue

3. How do Navigation content pages in HarmonyOS respond to onPageShow/hide events?

Lifecycle callbacks like onPageShow, onPageHide, and onBackPress only work on @Entry-decorated components.

For NavDestination subpages (managed by Navigation), use onShown, onHidden, and onBackPressed properties instead:

NavDestination({
  name: 'subpage',
  target: SubpageComponent
})
.onShown(() => {
  console.log('Subpage shown')
})
.onHidden(() => {
  console.log('Subpage hidden')
})

Avoid adding @Entry to NavDestination components, as each page should have only one entry point.

4. How to dynamically set JSON keys in HarmonyOS?

Convert JSON values to a Map for dynamic key handling:

class Test {
  code: string = ''
  data: TestData = new TestData();
}

class TestData {
  label: string = ''
}

@Component
@Entry
struct Index {
  jsonStr: string =
    '{"code": 200,"msg": "SUCCESS","status": true,"data": { "labelv": "null_0","langtype": "zh_CN","label": { "79531": "NFC access requires authorization for reading device information","150286": "Processed on another device","260256": "Permission denied, contact administrator" },"langid": 7 },"fail": false}'

  get() {
    let a: Test = JSON.parse(this.jsonStr) as Test
    let c: string = JSON.stringify(a.data.label)
    let jsonRecord: Map<string, string> = new Map(Object.entries(JSON.parse(c)))
    jsonRecord.forEach((value, key) => {
      console.log("Key:" + key)
    })
  }

  build() {
    Text('Click me').onClick(() => {
      this.get()
    })
  }
}

5. How to integrate HarmonyOS ArkUI C APIs with pure ArkUI components?

Use the XComponent for C API integration. Refer to:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-xcomponent-V5

Example:

XComponent({
  id: 'native-component',
  libPath: 'entry/ets/native',
  name: 'NativeComponent',
  controller: this.xComponentController
})
.width('100%')
.height('100%')

Replace libPath with your native library path and implement callbacks in the controller.