Removing Overlays, Navigating from Non-Build Functions, Controlling Line Breaks in Flow Layouts

【Daily HarmonyOS Next Knowledge】Removing Overlays, Navigating from Non-Build Functions, Controlling Line Breaks in Flow Layouts, Global Focus Events, and Forcing Portrait Orientation in Floating Windows on Landscape Screens

1. How to remove the overlay in HarmonyOS's bindsheet?

In the options object, there is a maskColor property used to set the color of the overlay. To ensure the overlay is completely transparent, set maskColor to a transparent value (e.g., Transparent). This will make the overlay invisible.

2. How to use this.navPathStack?.pushDestination outside of the build function in HarmonyOS?

The documentation only shows examples of using this.navPathStack?.pushDestination within the build function, triggered by an onClick event. However, when trying to use it elsewhere (e.g., for a link), it throws an error without any error message.

Solution: NavPathStack must be initialized within a Navigation component to enable navigation.

3. How to control the spacing between lines in a HarmonyOS flex flow layout when components wrap?

In earlier API versions, the space property in Flex({ wrap: FlexWrap.Wrap }) might not be available. For older APIs, refer to the documentation:
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-flex-V5#Example6

Workaround: Use alternative properties or layout components available in your API version.

4. Does HarmonyOS provide a global focus event callback at the application level, similar to OH_NativeXComponent_RegisterFocusEventCallback for XComponents?

Is there a window-level focus event?

Answer: Focus events are component-level; there is no application-level focus event.
https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-window

5. How to force a floating window to display in portrait orientation on a landscape screen in HarmonyOS?

When creating a floating window, setting it to强制 portrait orientation does not work as expected:
![[【Daily HarmonyOS Next Knowledge】25.06.06.png]]

Solution: Use windowClass.setPreferredOrientation(window.Orientation.LOCKED) to lock the orientation based on the current display. Here's an example:

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

@Entry
@Component
struct Test {
  @State message: string = 'Hello World';

  build() {
    Column() {
      Text(this.message)
        .id('Index4HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .fontColor(Color.Black)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
      Button('Lock Orientation').onClick(() => {
        window.getLastWindow(getContext(this), (err, win) => {
          win.setPreferredOrientation(window.Orientation.LOCKED)
        })
      })
        .fontColor(Color.Black)

      Button('Unlock Orientation')
        .fontColor(Color.Black)
        .onClick(() => {
          window.getLastWindow(getContext(this), (err, win) => {
            win.setPreferredOrientation(window.Orientation.AUTO_ROTATION)
          })
        })
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Orange)
  }
}

Note: LOCKED locks the screen to the current orientation (portrait or landscape). Use ORIENTATION_PORTRAIT to force portrait mode regardless of the device orientation.