After the page redirects, the status bar is not avoided.

Read the original article：After the page redirects, the status bar is not avoided.

Requirement Description

After multiple page redirects, the page does not avoid the status bar, causing some content to be obscured by the status bar, which affects the user experience.

Background Knowledge

• getWindowAvoidArea: Retrieves the area that the current application window content should avoid. This includes areas such as the system bar, notch screen area, gesture area, and soft keyboard area, which overlap with the window content and require the window content to be avoided.

Parameter name	type	Required	illustrate
type	AvoidAreaType	yes	Indicates the avoidance zone type.

• setWindowLayoutFullScreen： Determines whether the layout of the main window or sub-window is set to immersive mode. When immersive mode is active, the layout does not avoid the status bar and the three-button navigation bar, which may result in components overlapping with them. When non-immersive mode is active, the layout avoids the status bar and the three-button navigation bar, ensuring that components do not overlap with them.

Parameter name	type	Required	illustrate
isLayoutFullScreen	boolean	yes	Is the window layout an immersive layout (where the status bar and three-button navigation bar are still displayed)? True indicates an immersive layout; false indicates a non-immersive layout.

expandSafeArea: Controls the expansion of a component's safe area.

Parameter name	type	Required	illustrate
types	Array <safeAreaType>	yes	Configure the type of extended safe area. When the Metadata configuration item is not added, the page does not avoid the cutout, and the CUTOUT type does not take effect. Default value: [SafeAreaType.SYSTEM, SafeAreaType.CUTOUT, SafeAreaType.KEYBOARD]
edges	Array <SafeAreaEdge>	yes	Configure the direction of the extended safe area. Default value: [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM, SafeAreaEdge.START, SafeAreaEdge.END], extending to all avoidance areas.

Implementation Steps

• Check the statusBarHeight keyword in the application code to determine if the statusBarHeight value is re-fetched and updated when navigating to a new page.
• Investigate the setWindowLayoutFullScreen keyword in the application code to ensure that only setWindowLayoutFullScreen(true) is used to set the immersive layout, and that the avoidance area is not dynamically reset.

• Examine the expandSafeArea keyword to see if the page uses the expandSafeArea property. If it does, follow these steps to troubleshoot.

  • Check if the page has enabled clipping mode. Some container components (such as Tabs, Swiper) default to enabling clipping mode (clip(true)). clip(true) forces the clipping of child component content that exceeds the parent container, preventing expandSafeArea from extending to the safe area.
  • Verify if the Navigation page has set margins/padding. If margin/padding properties are set, causing the boundaries and safe area to not align, expandSafeArea will fail.
  • Check if the component setting expandSafeArea has fixed width and height dimensions, such as height(100). This can override the safe area expansion logic, causing expandSafeArea to fail.

• The getWindowAvoidArea method was not registered in the onPageShow lifecycle to update the avoidance area, resulting in the status bar height not being re-fetched during page transitions.

• After globally enabling the immersive layout with setWindowLayoutFullScreen(true), the avoidance area was not dynamically reset on secondary or tertiary pages after navigation, causing page content not to avoid the status bar.

• The expandSafeArea setting on the page failed, leading to the status bar not being avoided after multiple page transitions.

Code Snippet / Configuration

• Use the [Window.getWindowAvoidArea()](https://developer.huawei.com/consumer/en/doc/harmonyos-references/arkts-apis-window-window#getwindowavoidarea9) method to obtain the height of the avoidance area and set the top and bottom padding of the application page content accordingly to avoid the status bar and navigation bar.
• Recalculate the status bar height within the page lifecycle.

onPageShow() {
  window.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM, (area) => {
    this.statusBarHeight = area.topRect.height //Get the height of the system status bar
    this.updateLayout();  //Trigger layout refresh
  })
}

• Register a global system region change listener in Ability, and use AppStorage to achieve cross-page parameter synchronization.

onWindowStageCreate() {
  window.on('avoidAreaChange', (area) => {
   // Apply synchronization parameters
    AppStorage.setOrCreate('currentSafeArea', area);
  });
}

• Ensure that the expandSafeArea property is effective to extend the safe area.

1.Components with the expandSafeArea property set must disable the clipping mode.

   Tabs() {
     TabContent()
       .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
       .clip(false)  //Turn off cut mode
   }

2.Components with the expandSafeArea property must align with the safe area boundaries, dynamically adjusting margins/padding to ensure they coincide with the safe area edges.

3.Components with the expandSafeArea property are not recommended to have fixed width and height dimensions. It is advisable to use percentages or padding to adjust the component's width and height.

Written by Simay Ayberik