Routing Stack Issues, Image Rounding, Color Resource to Hex Conversion, Dataset Change Crash, Component Lifecycle

[Daily HarmonyOS Next Knowledge] Routing Stack Issues, Image Rounding, Color Resource to Hex Conversion, Dataset Change Crash, Component Lifecycle

1. When the HarmonyOS app is sent to the background and then reopened, Navigation returns to the bottom of the stack and rerenders?

Possible Causes

When using Navigation for routing, sending the app to the background and reopening it causes the page to return to the bottom of the stack and rerender. This occurs because:

1. Navigation bar hiding: The Navigation component hides the navigation bar by default and only redisplays it when the top-of-stack element is popped. When the app enters the background, the navigation bar is hidden, and reopening requires redisplaying it, triggering rerendering.
2. Stack management: The current page state is saved in the routing stack when the app is sent to the background. Reopening restores the state from the stack bottom, leading to rerendering.

Solutions

1. Set hideTitleBar to false:
   • In the Navigation component, set hideTitleBar: false.
   • Or set hideTitleBar: false in NavDestination components.
2. Use pushDestinationByName:
   • Push the current page to the stack using pushDestinationByName to keep it at the top.
   • Handle pop events with the onPop callback to avoid rerendering.

2. How to set rounded corners when using borderimage in HarmonyOS?

Refer to the document: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-border-image-V5

Example of setting a gradient border via borderImage:

// xxx.ets
@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        Text('This is gradient color.').textAlign(TextAlign.Center).height(50).width(200)
          .borderImage({
            source: {
              angle: 90,
              direction: GradientDirection.Left,
              colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]]
            },
            slice: { top: 10, bottom: 10, left: 10, right: 10 },
            width: { top: "10px", bottom: "10px", left: "10px", right: "10px" },
            repeat: RepeatMode.Stretch,
            fill: false
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

3. How to convert ResourceColor to a hexadecimal string in HarmonyOS?

Convert the decimal value from resourceManager.getColorSync to hex:

let resource: resourceManager.Resource = {
  bundleName: "com.example.helloworld",
  moduleName: "entry",
  id: $r('app.color.start_window_background').id
};
let colorNumber = this.context.resourceManager.getColorSync(resource);
let colorString = colorNumber.toString(16);
console.log(colorString);

Refer to: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-resource-manager-V5#getcolorsync10

4. Crash in IDataSource's onDatasetChange() in HarmonyOS: Error message: onDatasetChange cannot be used with other interface

When using LazyForEach with onDatasetChange for batch dataset modifications, this error occurs because onDatasetChange cannot be mixed with other data manipulation interfaces.

Solution

1. Avoid including deletion operations in onDatasetChange. Use onDataDelete separately for deletions.
2. Split operations: For simultaneous add/delete/move operations, call onDataAdd, onDataDelete, onDataMove, etc., separately, then refresh with onDataReloaded.

5. How to perform actions when a page is displayed or hidden in HarmonyOS (e.g., play on show, pause on hide)?

Use onPageShow (triggered when the page is displayed) and onPageHide (triggered when the page is hidden).

Refer to: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-custom-component-lifecycle-V5

Notes:

• Lifecycle callbacks are private and called by the framework, not manually.
• Avoid reusing the same component node across multiple windows to prevent lifecycle inconsistencies.