DEV Community

kouwei qing
kouwei qing

Posted on

Input Box Focus Color, Text Overflow Handling, Device-Aware Screen Rotation, Basic Control Encapsulation, Global Font Setting

#harmonyosnext

[Daily HarmonyOS Next Knowledge] Input Box Focus Color, Text Overflow Handling, Device-Aware Screen Rotation, Basic Control Encapsulation, Global Font Setting

1. Does HarmonyOS support modifying the focus cursor color for input boxes?

2. How to display an "ellipsis + more" when text exceeds the limit in HarmonyOS?

Control text overflow with overflow: TextOverflow.Ellipsis.

Reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-text-V5#textoverflow

textOverflow(value: { overflow: TextOverflow })

  • Sets the display mode for overflow text, truncating by character (e.g., words for English). To truncate by letter, use zero-width spaces (\u200B). From API version 11, combine with wordBreak: WordBreak.BREAK_ALL for letter-level truncation.
  • When overflow is set to TextOverflow.None, TextOverflow.Clip, or TextOverflow.Ellipsis, maxLines must be configured; otherwise, it fails. TextOverflow.None and TextOverflow.Clip have the same effect.
  • When overflow is set to TextOverflow.MARQUEE, text scrolls in a single line. maxLines and copyOption are ignored. textAlign works only when text is non-scrollable. The clip property defaults to true in marquee mode, and CustomSpan in attribute strings is unsupported.

3. How to enable screen rotation based on device settings in HarmonyOS?

Dynamically detect device types and configure auto-rotation support: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5#setpreferredorientation9

setPreferredOrientation(orientation: Orientation, callback: AsyncCallback<void>): void

  • Sets the main window's display orientation with an async callback. Effective only on devices supporting sensor-driven rotation, not on 2-in-1 devices, free multi-window mode, or sub-windows.

Use device information APIs to distinguish device types and enable auto-rotation accordingly:

Reference: @ohos.distributedDeviceManager (Device Management): https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-distributeddevicemanager-V5

Key capabilities:

  • Register/unregister device online/offline listeners.
  • Discover nearby untrusted devices.
  • Authenticate/取消认证设备.
  • Query trusted device lists.
  • Retrieve local device info (name, type, ID, etc.).

4. How to encapsulate commonly used basic controls (e.g., Button, Text, Column) in HarmonyOS projects?

Reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-create-custom-components-V5

In ArkUI, UI elements are components: system-provided or developer-defined (custom components). Custom components enhance code reusability, separate business logic from UI, and facilitate version evolution.

Key features:

  • Composability: Combine system components, properties, and methods.
  • Reusability: Reuse custom components as instances in different parent components/containers.
  • Data-driven UI update: Modify state variables to trigger UI refreshes.

5. How to set global fonts in HarmonyOS?

Top comments (0)