List Component Copy Issues, Retrieving Page Routing Information, Component Exposed Methods

[Daily HarmonyOS Next Knowledge] List Component Copy Issues, Retrieving Page Routing Information, Component Exposed Methods, Page Destruction Issues, Status Bar Color Modification

1. In HarmonyOS, are items in ForEach and LazyForEach references or completely new copies?

Question: Are items in ForEach and LazyForEach references or new copies?

Scenario:

LazyForEach(this.treeData as MyDataSource, (item: TreeNode) => {
  TreeItem({ treeNode: item, option: this.option, callback: () => {
    console.log('asdfasdfasdf');
  }})

Items in ForEach:

In ForEach, each item is a constant and a new copy during each iteration. This means that for every iteration, item is an independent copy, and its stored state and data do not affect other iterations.

Items in LazyForEach:

In LazyForEach, item is a unique and fixed key generated by a key-value generator. Each data item generates a key to identify the corresponding component. When the key changes, the ArkUI framework treats the array element as replaced or modified and creates a new component based on the new key. Therefore, item is passed by reference in LazyForEach, and its state and data can be observed during iterations.

Performance Considerations:

• ForEach creates new copies for each iteration, leading to higher memory consumption and potential performance issues with large datasets.
• LazyForEach uses reference passing, reducing memory overhead and improving efficiency by reusing components.

Use Cases:

• Use ForEach when you need independent, isolated copies of data.
• Use LazyForEach for efficient reference passing and component reuse.

2. How to retrieve the NavigationInfo object of a page in HarmonyOS?

Reference: Custom Component API

Custom component built-in methods are APIs provided by the ArkUI framework. You can call these APIs on a custom component instance to retrieve information such as its UIContext.

Method:

queryNavigationInfo(): NavigationInfo | undefined
// Query the Navigation information to which the custom component belongs.

3. Can HarmonyOS components expose methods for parent components to call?

Reference Demo:

@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 {
  @State noShow: boolean = false;

  build() {
    Column() {
      Text('Get Child\'s exposed method!').fontSize('18vp').fontColor(Color.Gray);
      Divider();
      Child({ controller: ChildRef });
      Child();
      Button('Parent calls Child\'s changeText').onClick(() => {
        ChildRef.changeText('Parent called Child\'s changeText');
      });
    }
  }
}

4. Why do local instance variables persist after popping a page using HarmonyOS navigation?

Issue:

1. Navigate to FlutterPageIndex, which declares a flutterEntry instance.
2. Pop to another page using navigation (closing FlutterPageIndex).
3. Later, when callbackTheme is invoked, this.flutterEntry?.refreshTheme() still executes, indicating the instance was not destroyed.

Solution:

pop() only removes the top element from the navigation stack and triggers the onPop callback. It does not destroy intermediate stack entries. Use popToIndex or popToName instead.

5. How to modify the status bar color in HarmonyOS?

Use the setWindowSystemBarProperties method to customize the status bar:

Steps:

1. In EntryAbility.ets, use the onWindowStageCreate method.
2. Call setWindowSystemBarProperties to set properties like background color and transparency.

Example (set status bar to white):

setWindowSystemBarProperties({   
  backgroundColor: '#FFFFFF'   
});

This allows you to customize the status bar appearance to match your app's UI requirements.