Page Lifecycle Monitoring, Scroll Usage, Disabling List Scrolling, Single Page Full Screen Setting

[Daily HarmonyOS Next Knowledge] Page Lifecycle Monitoring, Scroll Usage, Disabling List Scrolling, Single Page Full Screen Setting, Reference Counting Issues

1. How to monitor the lifecycle of a specific page in HarmonyOS?

1. Refer to invisible monitoring: NavDestinationInfo: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-arkui-observer-V5
2. For lifecycle monitoring of a single page, refer to the page lifecycle methods: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-page-custom-components-lifecycle-V5

Page Lifecycle (for components decorated with @Entry):

• onPageShow: Triggered once every time the page is displayed, including routing and app foreground scenarios.
• onPageHide: Triggered once every time the page is hidden, including routing and app background scenarios.
• onBackPress: Triggered when the user clicks the back button.

Component Lifecycle (for custom components decorated with @Component):

• aboutToAppear: Called before the component appears, after creating a new instance and before executing build().
• onDidBuild: Called after the component's build() completes. Use for non-UI operations like data reporting. Avoid state changes or animations here to prevent unstable UI behavior.
• aboutToDisappear: Called before the component is destroyed. Do not modify state variables, especially @link variables, to avoid instability.

The lifecycle flow for @Entry-decorated components (pages) is shown below:

2. Why doesn’t scrollToIndex trigger the onScroll callback in HarmonyOS Scroller?

In a List, scrollToIndex does not trigger the onScroll callback, while scrollTo does. scrollToIndex jumps directly to the target element without animation by default, thus not triggering the callback.

Solution: Add animation by setting the second parameter of scrollToIndex to true:

List({
  space: 3,
  scroller: this.scroller,
}) {
  LazyForEach(this.data, (item: string, index: number) => {
    ListItem() {
      MyListItem({ item })
        .onClick(() => {
          this.scroller.scrollToIndex(index, true) // Add animation to trigger callbacks
        })
    }
  }, (item: string) => item)
}
.onScroll((xOffset: number, yOffset: number) => {
  console.info('onScroll', yOffset)
})
.onDidScroll((xOffset: number, yOffset: number) => {
  console.info('onDidScroll', yOffset)
})

3. How to dynamically disable scrolling for a List in HarmonyOS?

When the finger slides down, the page follows. When sliding up, both the page and List scroll. To dynamically control List scrolling:

Use the enableScrollInteraction method: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-list-V5

4. Is there a way to set full screen/non-full screen for a single page without affecting others in HarmonyOS?

Solution: Set full screen in onPageShow and reset in onPageHide:

import { window } from '@kit.ArkUI'

@Entry
@Component
struct Page2 {
  onPageShow(): void {
    window.getLastWindow(getContext(this), (err, win) => {
      win.setWindowLayoutFullScreen(true)
    })
  }

  onPageHide(): void {
    window.getLastWindow(getContext(this), (err, win) => {
      win.setWindowLayoutFullScreen(false)
    })
  }

  build() {
    Column() {
      Text('Full screen page....')
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Green)
  }
}

5. Does the HarmonyOS API OH_NativerWindow_CreateNativeWindowFromSurfaceId() increment the reference count?

Yes, it increments the reference count by 1.