DEV Community

Cover image for Nested Class State Observation, Text & Emoji Display, Dynamic Screenshot
kouwei qing
kouwei qing

Posted on

Nested Class State Observation, Text & Emoji Display, Dynamic Screenshot

#harmonyosnext

【Daily HarmonyOS Next Knowledge】Nested Class State Observation, Text & Emoji Display, Dynamic Screenshot, Dialog in Functions, Component Size Change Detection

1. HarmonyOS nested class state observation issue? 

@Observed
class A {
  field1?: string
  field2?: Array<ClassB>
}
@Observed
class B {
  field3?: string
}
@Component
struct View {
  @ObjectLink a: ClassA
  build() {
    if (this.a && this.a.field2 && this.a.field2.field3) {
      Text(this.a.field2.field3)
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

How to observe the state change of field3 in ClassB? Currently, updating field3 does not refresh the page.

Reference demo:

@ObservedV2
class Son {
  @Trace age: string = "100";
}
class Father {
  son: Son = new Son();
}
@Entry
@Component
struct Index {
  father: Father = new Father();
  build() {
    Column() {
      // When clicking to change age, the Text component refreshes
      Text(`${this.father.son.age}`)
        .onClick(() => {
          this.father.son.age = "102";
        })
      TextInput({text: `${this.father.son.age}`, placeholder: "aaa"})
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

2. Does the HarmonyOS text component support simultaneous display of text and emojis?

Is there a text component that supports displaying text and emojis together?

The Text component does not support small images or emojis. Use the RichEditor component instead:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-richeditor-V5

3. Does HarmonyOS have an interface for dynamic screenshot?

Is there an interface to implement screenshot dynamically?

Use component screenshot capabilities:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-arkui-componentsnapshot-V5

@ohos.arkui.componentSnapshot

This module provides screenshot capabilities for both loaded and unloaded components. It captures only the component's defined area—content drawn outside the component or parent boundaries is not included, and sibling components are not visible in the screenshot.

4. How to trigger a custom dialog in an external function in HarmonyOS?

Implement via global popups:

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

@ohos.promptAction

5. How to accurately obtain component size changes in HarmonyOS ArkUI?

onVisibleAreaChange(ratios: Array, event: (isVisible: boolean, currentRatio: number) => void): T

  • ratios: Array of thresholds (0.0–1.0). The callback triggers when the visible area ratio approaches any threshold.
  • event:
    • isVisible: True if the ratio increases, false if it decreases.
    • currentRatio: The visible area ratio when the callback triggers.### [Daily HarmonyOS Next Knowledge] Nested Class State Observation, Simultaneous Text and Emoji Display, Dynamic Screenshot Implementation, Popping Dialogs in Functions, Obtaining Component Size Changes

1. HarmonyOS Nested Class State Observation Issue? 

@Observed
class A {
  field1?: string;
  field2?: Array<ClassB>;
}

@Observed
class B {
  field3?: string;
}

@Component
struct View {
  @ObjectLink a: ClassA;

  build() {
    if (this.a && this.a.field2 && this.a.filed2.field3) {
      Text(this.a.filed2.field3);
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

How can we observe state changes in field3 of ClassB? Currently, the UI does not refresh when field3 is updated.

Reference Demo:

@ObservedV2
class Son {
  @Trace age: string = "100";
}

class Father {
  son: Son = new Son();
}

@Entry
@Component
struct Index {
  father: Father = new Father();

  build() {
    Column() {
      // The Text component refreshes when age is updated via click
      Text(`${this.father.son.age}`)
        .onClick(() => {
          this.father.son.age = "102";
        });

      TextInput({ text: `${this.father.son.age}`, placeholder: "aaa" });
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

2. Does the HarmonyOS Text component currently support simultaneous display of text and emojis?

Is there a component that supports displaying both text and emojis?

The Text component does not currently support small images or emojis. Use the RichEditor component instead:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-richeditor-V5

3. Are there interfaces in HarmonyOS to dynamically capture screenshots?

Can screenshots be dynamically captured via interfaces?

Use the Component Snapshot API:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-arkui-componentsnapshot-V5

@ohos.arkui.componentSnapshot (Component Snapshot)

This module provides the ability to capture screenshots of components, including both loaded and unloaded components. The screenshot only captures the component's defined area; content drawn outside this area (e.g., overflow or sibling components) will not be included.

4. How to display a custom dialog from an external function in HarmonyOS?

Consider using global dialogs:

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

@ohos.promptAction (Dialogs)

5. How to accurately detect component size changes in HarmonyOS ArkUI?

Component Area Change Event (onAreaChange):

Triggered when the component's display size or position changes.

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-component-area-change-event-V5

Component Size Change Event (onSizeChange):

Triggered when the component's display size changes.

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-component-size-change-event-V5

Component Visible Area Change Event (onVisibleAreaChange):

Triggered when the component's visible area in the screen changes. Useful for scenarios like ad exposure tracking.

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-component-visible-area-change-event-V5

onVisibleAreaChange(ratios: Array<number>, event: (isVisible: boolean, currentRatio: number) => void): T
Enter fullscreen mode Exit fullscreen mode

Parameters:

| Parameter | Type | Required | Description |

|-----------|------|----------|-------------|

| ratios | Array<number> | Yes | Threshold array. Each threshold represents the ratio of the component's visible area (within its parent) to its total area. The callback triggers when this ratio approaches a threshold. Valid range: [0.0, 1.0]. Values outside this range are clamped to 0.0 or 1.0.

Note: Values near 0 or 1 are rounded with a tolerance of 0.001 (e.g., 0.9997 becomes 1). |

| event | (isVisible: boolean, currentRatio: number) => void | Yes | - isVisible: Indicates if the visible ratio increased (true) or decreased (false).

- currentRatio: The current visible area ratio when the callback is triggered. |

This event is useful for scenarios like determining if a component is fully or partially visible on screen (e.g., for ad impression tracking).

Top comments (0)