Add Mask to Main View, Stealth Screenshot, Custom Password Icon, Flex Subcomponent Compression

#harmonyosnext

[Daily HarmonyOS Next Knowledge] Add Mask to Main View, Stealth Screenshot, Custom Password Icon, Flex Subcomponent Compression, Set Minimum Height for Popup Dialog

1. Can HarmonyOS support adding a full-screen mask to the main view in a structure like NavDestination-tab-index (main view)?

The current structure is a Tab containing Navigation, with a mask added to the main view within Navigation. Although the height is set to 100%, the bottom tab bar is not covered. How can the tab bar be masked?

Components added within Navigation do not extend beyond its boundaries. Add a full-screen sibling component to the Tab as the mask layer.

2. How to implement stealth screenshot reporting (entire screen including floating windows) in HarmonyOS?

When detecting user actions such as screen switching, floating windows, or subtitle activation, the app silently captures a full-screen screenshot (including overlays) and reports it to the backend.

References:

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

This module provides the ability to capture component screenshots, including loaded and unloaded components. The screenshot only captures the component's defined area; content drawn outside this area (e.g., overflow from child or sibling components) will not be included.
Window Screenshot: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/map-map-V5#section4803202315197

3. Why does the custom passwordIcon stop working when TextInput .enabled(false) is set in HarmonyOS?

In a password input field, the custom passwordIcon does not work when enabled is set to false.

TextInput({
  text: 'this.mWifiPassword'
})
  .type(InputType.Password)
  .passwordIcon({ onIconSrc: $r("app.media.ic_open_eye"), offIconSrc: $r("app.media.ic_close_eye") })
  .height(44)
  .enabled(false)

Explanation:

Setting the enabled property of TextInput to false disables all interactions (clicks, presses, focus).
passwordIcon is a property of TextInput for the end-of-field icon in password mode.
When enabled is false, passwordIcon cannot respond to clicks or presses because the component itself is non-interactive.

Solution: To ensure the passwordIcon works, keep enabled set to true.

4. Does Flex compress subcomponents in HarmonyOS? Should constraintSize({min}) be used to fix subcomponent width/height?

As shown, the component has left/right icons with adaptive middle content that truncates when overflowing. When the text is too long, the left Image component is compressed.

Solution: Flex may compress subcomponents. Use constraintSize({min}) to set fixed dimensions for internal components.

5. How to set a minimum height for the bindSheet modal dialog in HarmonyOS?

Where can I check if the Build Mode is Debug, Release, or <None> during compilation for HAP and HSP?

Solution:

The bindSheet modal dialog supports setting height using SheetSize | Length.

Reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-sheet-transition-V5#sheetoptions

DEV Community