Text Height Issue, Active Focus Acquisition, Screen-off Lifecycle, Component Switch Button Data Replacement

[Daily HarmonyOS Next Knowledge] Text Height Issue, Active Focus Acquisition, Screen-off Lifecycle, Component Switch Button Data Replacement, Return to System Desktop

1. When setting Height for a HarmonyOS Text component, does the overflow content display?

For the Text component, when setting a height and inputting excessive text, the overflowing content will display by default.

The clip property of the Text component defaults to false, meaning content exceeding the component area is not truncated. To truncate content, add the .clip(true) property.

2. How to actively acquire component focus in HarmonyOS?

With two input fields (one for the account and one for the password), the goal is to move focus to the password input field via code after completing the account input.

Dynamic focus control for components can be achieved using focusControl.requestFocus(). Refer to the documentation: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-focus-V5

For custom component focus effects, set whether the component can receive focus and the specific focus order for tab or direction key navigation:

• focusable(value: boolean): Sets whether the current component can acquire focus.

Parameter Name	Type	Required	Description
value	boolean	Yes	Sets whether the current component can acquire focus. Note: Components with default interaction logic (e.g., Button, TextInput) are focusable by default, while components like Text and Image are not. Focus events cannot be triggered when focus is disabled.

3. Why don't the screen-off and activation lifecycles of a HarmonyOS navigation page execute?

onHidden and onShown of NavDestination are called when the component is hidden or shown in a full modal. For screen-off and screen-on events, listen to onPageShow and onPageHide. Refer to the screen-off listening documentation: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-display-V5

The screen properties provide basic capabilities for managing display devices, including obtaining information about the default display device, all display devices, and listening for display device plugging/unplugging events.

Import the module:

import { display } from '@kit.ArkUI';

Use getAllDisplays() or getDefaultDisplaySync() to obtain a Display instance, then call corresponding methods via this instance.

Name	Type	Read-only	Optional	Description
id	number	Yes	No	The ID of the display device, which should be an integer. 元服务API (MetaService API): This interface supports use in MetaServices starting from API version 12.
name	string	Yes	No	The name of the display device. 元服务API: This interface supports use in MetaServices starting from API version 12.
alive	boolean	Yes	No	Whether the display device is active. 元服务API: This interface supports use in MetaServices starting from API version 12.
state	DisplayState	Yes	No	The state of the display device. 元服务API: This interface supports use in MetaServices starting from API version 12.
refreshRate	number	Yes	No	The refresh rate of the display device, in Hz (integer). 元服务API: This interface supports use in MetaServices starting from API version 12.
rotation	number	Yes	No	The clockwise rotation angle of the display device screen. 0: 0° clockwise rotation; 1: 90° clockwise rotation; 2: 180° clockwise rotation; 3: 270° clockwise rotation. 元服务API: This interface supports use in MetaServices starting from API version 11.
width	number	Yes	No	The screen width of the display device in px (integer). 元服务API: This interface supports use in MetaServices starting from API version 11.
height	number	Yes	No	The screen height of the display device in px (integer). 元服务API: This interface supports use in MetaServices starting from API version 11.
densityDPI	number	Yes	No	The physical pixel density of the display device screen (expressed as pixels per inch). This parameter is a floating-point number in px, ranging from [80.0, 640.0]. Common values include 160.0 and 480.0, with actual values depending on the options provided by different devices. 元服务API: This interface supports use in MetaServices starting from API version 12.
orientation10+	Orientation	Yes	No	Represents the current display orientation of the screen. 元服务API: This interface supports use in MetaServices starting from API version 12.
densityPixels	number	Yes	No	The logical pixel density of the display device, representing the scaling factor between physical and logical pixels, calculated as: This parameter is a floating-point number restricted by the densityDPI range, ranging from [0.5, 4.0]. Common values include 1.0 and 3.0, with actual values depending on the densityDPI provided by different devices. 元服务API: This interface supports use in MetaServices starting from API version 11.
scaledDensity	number	Yes	No	The display font scaling factor of the display device. This parameter is a floating-point number, typically the same as densityPixels. 元服务API: This interface supports use in MetaServices starting from API version 12.
xDPI	number	Yes	No	The exact physical pixel value per inch on the x-axis of the screen (floating-point number). 元服务API: This interface supports use in MetaServices starting from API version 12.
yDPI	number	Yes	No	The exact physical pixel value per inch on the y-axis of the screen (floating-point number). 元服务API: This interface supports use in MetaServices starting from API version 12.
colorSpaces11+	Array	Yes	No	All color gamut types supported by the display device. 元服务API: This interface supports use in MetaServices starting from API version 12.
hdrFormats11+	Array	Yes	No	All HDR formats supported by the display device. 元服务API: This interface supports use in MetaServices starting from API version 12.
availableWidth12+	number	Yes	No	The available area width of the screen on 2-in-1 devices, in px (integer > 0). 元服务API: This interface supports use in MetaServices starting from API version 12.
availableHeight12+	number	Yes	No	The available area height of the screen on 2-in-1 devices, in px (integer > 0). 元服务API: This interface supports use in MetaServices starting from API version 12.

4. How to implement data replacement for a @Component toggle button in HarmonyOS?

There is a @Component containing a bean class with three QuoteUiEntity variables. It nests another @Component that receives one of the three QuoteUiEntity variables. With three buttons, how can the nested @Component receive the corresponding QuoteUiEntity when a button is clicked?

Refer to the demo:

class Model {
  public value: string
  constructor(value: string) {
    this.value = value
  }
}
@Entry
@Component
struct EntryComponent {
  build() {
    Column() {
      MyComponent({ count: 1, increaseBy: 2 })
        .width(300)
      MyComponent({ title: new Model('Hello World 2'), count: 7 })
    }
  }
}
@Component
struct MyComponent {
  @State title: Model = new Model('Hello World')
  @State count: number = 0
  private increaseBy: number = 1
  build() {
    Column() {
      Text(`${this.title.value}`)
        .margin(10)
      Button(`Click to change title`)
        .onClick(() => {
          this.title.value = this.title.value === 'Hello ArkUI' ? 'Hello World' : 'Hello ArkUI'
        })
        .width(300)
        .margin(10)
      Button(`Click to increase count = ${this.count}`)
        .onClick(() => {
          this.count += this.increaseBy
        })
        .width(300)
        .margin(10)
    }
  }
}

5. How to return to the system desktop in HarmonyOS?

When overriding the onBackPress method on the home page, how to minimize the app to the background (i.e., return to the system desktop)?

In the page's onBackPress, obtain the main window object via windowStage and use minimize to minimize the main window. Refer to the documentation: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5#minimize11

minimize(callback: AsyncCallback<void>): void

This interface has different functionalities based on the calling object:

• For the main window, it minimizes the window, which can be restored from the Dock.
• For sub-windows, it hides the window, which cannot be restored from the Dock (use showWindow() to restore). Calling this interface on a floating window will return an error code of 1300002.

Refer to the demo:

import window from '@ohos.window'
import { BusinessError } from '@ohos.base';
@Entry
@Component
struct Page240605161307072 {
  @State message: string = 'Hello World';
  onBackPress() {
    const context = getContext(this)
    window.getLastWindow(getContext()).then((data) => {
      // Get the window object
      let windowClass = data;
      windowClass.minimize((err: BusinessError) => {
        const errCode: number = err.code;
        if (errCode) {
          console.error('Failed to minimize the window. Cause: ' + JSON.stringify(err));
          return;
        }
        console.info('Succeeded in minimizing the window.');
      });
      console.info('Succeeded in obtaining the top window. Data: ' + JSON.stringify(data));
    });
    return true;
  }
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        TextInput()
      }
      .width('100%')
    }
    .height('100%')
  }
}