Text Content Font, Half-screen Routing, Input Cursor Movement Monitoring, DidBuild

【Daily HarmonyOS Next Knowledge】Text Content Font, Half-screen Routing, Input Cursor Movement Monitoring, DidBuild

1. HarmonyOS Text content not displayed when using fontFamily?

To globally use custom fonts in an app, register them via the windowStage.loadContent callback in the onWindowStageCreate lifecycle of the EntryAbility.ets file.

2. How to open a half-screen via routing in HarmonyOS?

In scenarios like live broadcast rooms or feed streams, clicking a button opens a half-screen container with an RNView. Clicking within RN opens a new half-screen, allowing multiple half-screens to be stacked. Routing simplifies this by abstracting the jump logic, eliminating the need for business parties to care about the entry point or write separate components for each scenario.

Use consistent component navigation with the NavDestinationMode.DIALOG display type:

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-navigation-navigation-V5

3. HarmonyOS router.replaceUrl issue?

When page A uses pushUrl with router.RouterMode.Single to navigate to page B, and page B uses replaceUrl with router.RouterMode.Single to return to page A, clicking the back button in page A or the system back button may fail to navigate properly (e.g., returning directly to the desktop).

Solution: Replace router.replaceUrl() with router.pushUrl(). replaceUrl replaces the current page and destroys the replaced page, while pushUrl maintains the page stack.

Reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-router-V5#routerback

Demo example:

// searchDetail.ets
import { router } from '@kit.ArkUI'

@Entry
@Component
struct searchDeatil {
  onPageHide(): void {
    router.clear() // Clear all historical pages, keeping only the current page at the stack top.
  }
  @State message: string = 'Return'

  build() {
    Row() {
      Column() {
        Text('Page B')
        Button(this.message).fontSize(20).onClick(() => {
          router.replaceUrl({
            url: 'pages/Index'
          }, router.RouterMode.Single, (err) => {
            if (err) {
              console.error(`Invoke replaceUrl failed, code is ${err.code}, message is ${err.message}`);
              return;
            }
            console.info('Invoke replaceUrl succeeded.');
          })
        })
      }
    }
  }
}

// index.ets
import router from '@ohos.router';
@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        Text('Page A')
        Button('Jump to B').onClick(() => {
          router.pushUrl({
            url: 'pages/SearchDetail' // Target URL
          }, router.RouterMode.Single, (err) => {
            if (err) {
              console.error(`Invoke replaceUrl failed, code is ${err.code}, message is ${err.message}`);
              return;
            }
            console.info('Invoke replaceUrl succeeded.');
          })
        })
        Button('Return').onClick(() => {
          router.back()
        })
      }
    }
  }
}

4. HarmonyOS input cursor movement monitoring?

When using a custom keyboard with TextInput, setting maxLength, and inputting beyond the limit, deleting characters may not trigger the onChange callback until excess inputs are cleared. Monitoring cursor movement to reset it to the end is needed.

Use the @ohos.inputMethodEngine service's KeyboardDelegate.on('cursorContextChange') to subscribe to cursor events:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-inputmethodengine-V5#oncursorcontextchange

on(type: 'cursorContextChange', callback: (x: number, y: number, height: number) => void): void

Example:

try {
  inputMethodEngine.getKeyboardDelegate().on('cursorContextChange', (x: number, y: number, height: number) => {
    console.log('inputMethodEngine cursorContextChange x:' + x);
    console.log('inputMethodEngine cursorContextChange y:' + y);
    console.log('inputMethodEngine cursorContextChange height:' + height);
  });
} catch (err) {
  console.error(`Failed to cursorContextChange: ${JSON.stringify(err)}`);
}

5. What is the role and application scenario of HarmonyOS onDidBuild?

The build() method is for defining UI components, while onDidBuild runs after build() completes, making it suitable for non-UI logic (e.g.,埋点 (tracking), simple calculations). Avoid modifying components in onDidBuild since the UI structure is finalized. In contrast, aboutToAppear runs before build().