HarmonyOS NEXT project practice：Manage avoidance zones

reference material:
https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-immersive#section813019373176

Core concepts

The visibility and concealment of avoidance zones:
When the page is displayed or hidden, use the Window. setWindowLayoutFullScreen() method to set whether the window is in full screen mode, and use the Window. setWindowSystemBarEnabling () method to set the status bar and navigation bar to be visible or hidden.

Property settings for the system bar:

setWindowSystemBarProperties(systemBarProperties: SystemBarProperties): Promise<void>

Set the properties of the main window status bar and use Promise asynchronous callback. This interface does not take effect when called on 2-in-1 devices, and it does not take effect immediately when called on other devices in split screen mode (i.e. window mode is window.Windows Status Type. SPLIT_SCREEN), free floating window mode (i.e. window mode is window.Windows Status Type. FLOODING), and free multi window mode (can be turned on by clicking the free multi window button in the device control center). It only takes effect when entering the full screen main window.

Concept of Safe Zone:
The safe zone refers to the display area of a page. By default, interfaces developed by developers are laid out within the safe zone and do not overlap with the avoidance zones set by the system, such as the status bar and navigation bar areas. Provide attribute methods that allow developers to set the drawing content of components to exceed the limits of the safe zone. The expandSafeArea attribute supports the extension of the drawing area of components outside the safe zone without changing the layout. Set the setKeyboardAvoidMode to configure the avoidance mode of the page when the virtual keyboard pops up. When there is a title bar or other text on the page that does not want to overlap with the avoidance area, it is recommended to set the expandSafeArea property on the component to achieve immersive effects, or you can directly set full screen immersion through the window interface setWindowLayoutFullScreen.

Control the avoidance mode of the page when lifting the virtual keyboard
Interface:

setKeyboardAvoidMode(value: KeyboardAvoidMode): void

Value: Configure the avoidance mode of the page when lifting the virtual keyboard.
Default value: KeyboardAvoidMode.oFFSET, the default avoidance mode when the keyboard is lifted is upward.

describe
KeyboardAvoidMode.RISIZE mode compresses the page size, and components with percentage width and height settings on the page will be compressed along with the page, while components with directly set width and height will be laid out according to the fixed size settings. When setting the RESIZE mode of KeyboardAvoidMode, expandSafeArea ([SafeAreaType.KEYBOARD], [SafeAreEdge.BOTTOM]) does not take effect.
KeyboardAvoidMode-NONE mode configuration page does not avoid the keyboard, and the page will be covered by a raised keyboard.

KeyboardAvoidMode: Configure the avoidance mode of the page when the keyboard avoids. The meaning of attributes is as follows:
OFFSET: Upward mode.
RESIZE: Compression mode.
OFFSET_WITH_CARET: Upward mode, when the cursor position in the input box changes, it will also trigger avoidance.
RESIZE_WITH_CARET: Compression mode, which also triggers avoidance when the cursor position in the input box changes.
NONE: Do not avoid the keyboard.

Code Practical Example:

import { common } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';
import { KeyboardAvoidMode } from '@kit.ArkUI';

@Entry
@Component
struct ManageAvoidZonePage {
  context = this.getUIContext();
  uiAbilityContext = this.context.getHostContext() as common.UIAbilityContext;
  private windowClass = this.uiAbilityContext.windowStage.getMainWindowSync();
  private keyboardAvoidMode = KeyboardAvoidMode.OFFSET

  build() {
    Column() {
      Column({ space: 10 }) {
        Text('ManageAvoidZone Page')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)

        Button('hideSystemBar')
          .onClick(() => {
            this.hide()
          })

        Button('showSystemBar')
          .onClick(() => {
            this.show()
          })

        Button('setSystemBarBgBlack')
          .onClick(() => {
            let sysBarProps: window.SystemBarProperties = {
              statusBarColor: '#000000',
              statusBarContentColor: '#ffffff'
            };
            this.windowClass.setWindowSystemBarProperties(sysBarProps);
          })

        Button('setSystemBarBgWhite')
          .onClick(() => {
            let sysBarProps: window.SystemBarProperties = {
              statusBarColor: '#ffffff',
              statusBarContentColor: '#000000'
            };
            this.windowClass.setWindowSystemBarProperties(sysBarProps);
          })

        TextInput()

        Button('changeKeyboardAvoidMode')
          .onClick(() => {
            if (this.keyboardAvoidMode === KeyboardAvoidMode.OFFSET) {
              this.keyboardAvoidMode =KeyboardAvoidMode.RESIZE
              this.getUIContext().setKeyboardAvoidMode(this.keyboardAvoidMode);
            } else {
              this.keyboardAvoidMode =KeyboardAvoidMode.OFFSET
              this.getUIContext().setKeyboardAvoidMode(this.keyboardAvoidMode);
            }
          })
      }
      .width('100%')

      Button('submit')
        .margin(10)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.SpaceBetween)
    .backgroundColor('#fffffae5')
  }

  hide() {
    this.windowClass.setWindowLayoutFullScreen(true);
    this.windowClass.setWindowSystemBarEnable([]);
  }

  show() {
    this.windowClass.setWindowLayoutFullScreen(false);
    this.windowClass.setWindowSystemBarEnable(['status', 'navigation']);
  }
}