HarmonyOS NEXT实战：管理避让区

Question

##HarmonyOS Next实战##HarmonyOS SDK应用服务##教育##

参考资料：
https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-immersive#section813019373176

核心概念
避让区的显隐：
在页面显示或隐藏时，使用Window.setWindowLayoutFullScreen()方法设置窗口是否为全屏模式，使用Window.setWindowSystemBarEnable()方法设置状态栏和导航条显隐。

系统栏的属性设置：

setWindowSystemBarProperties(systemBarProperties: SystemBarProperties): Promise

设置主窗口状态栏的属性，使用Promise异步回调，该接口在2in1设备上调用不生效，其他设备在分屏模式（即窗口模式为window.WindowStatusType.SPLIT_SCREEN）、自由悬浮窗口模式（即窗口模式为window.WindowStatusType.FLOATING）、自由多窗模式（可点击设备控制中心中的自由多窗按钮开启）下调用不会立刻生效，只有进入全屏主窗口才会生效。

安全区域概念：
安全区域是指页面的显示区域，默认情况下开发者开发的界面都布局在安全区域内，不与系统设置的避让区比如状态栏、导航栏区域重叠。提供属性方法允许开发者设置组件绘制内容突破安全区域的限制，通过expandSafeArea属性支持组件不改变布局情况下扩展其绘制区域至安全区外，通过设置setKeyboardAvoidMode来配置虚拟键盘弹出时页面的避让模式。页面中有标题栏等文字不希望和避让区重叠时，建议对组件设置expandSafeArea属性实现沉浸式效果，也可以直接通过窗口接口setWindowLayoutFullScreen设置全屏沉浸式。

控制虚拟键盘抬起时页面的避让模式
接口：

setKeyboardAvoidMode(value: KeyboardAvoidMode): void

value：配置虚拟键盘抬起时页面的避让模式。
默认值：KeyboardAvoidMode.OFFSET，键盘抬起时默认避让模式为上抬。

说明
KeyboardAvoidMode.RESIZE模式会压缩页面大小，页面中设置百分比宽高的组件会跟随页面压缩，而直接设置宽高的组件会按设置的固定大小布局。设置KeyboardAvoidMode的RESIZE模式时，expandSafeArea([SafeAreaType.KEYBOARD],[SafeAreaEdge.BOTTOM])不生效。
KeyboardAvoidMode.NONE模式配置页面不避让键盘，页面会被抬起的键盘遮盖。

KeyboardAvoidMode：配置键盘避让时页面的避让模式。属性即含义如下：
OFFSET：上抬模式。
RESIZE：压缩模式。
OFFSET_WITH_CARET：上抬模式，输入框光标位置发生变化时候也会触发避让。
RESIZE_WITH_CARET：压缩模式，输入框光标位置发生变化时候也会触发避让。
NONE：不避让键盘。

代码实战示例：

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']);
  }
}