HarmonyOS NEXT 适配安全区

1.  首先在   EntryAbility   文件中引入 

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

2、在  onWindowStageCreate  方法中  使页面全屏  

let windowClass: window.Window = windowStage.getMainWindowSync(); // 获取应用主窗口
// 1. 设置窗口全屏
let isLayoutFullScreen = true;
windowClass.setWindowLayoutFullScreen(isLayoutFullScreen).then(() => {
  console.info('Succeeded in setting the window layout to full-screen mode.');
}).catch((err: BusinessError) => {
  console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err));
});

3、创建两个参数保存起来 （还是在  onWindowStageCreate  中）

let typeBottom = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR; // 以导航条避让为例
let avoidArea = windowClass.getWindowAvoidArea(typeBottom);
let bottomRectHeight = avoidArea.bottomRect.height; // 获取到导航条区域的高度
AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight);

let typeTop = window.AvoidAreaType.TYPE_SYSTEM; // 以状态栏避让为例
avoidArea = windowClass.getWindowAvoidArea(typeTop);
let topRectHeight = avoidArea.topRect.height; // 获取状态栏区域高度
AppStorage.setOrCreate('topRectHeight', topRectHeight);

4、监听 方法  并存储获取到的顶部安全区高度和底部安全区高度 （还是在  onWindowStageCreate  中）

// 监听
windowClass.on('avoidAreaChange', (data) => {
  if (data.type === window.AvoidAreaType.TYPE_SYSTEM) {
    let topRectHeight = data.area.topRect.height;
    AppStorage.setOrCreate('topRectHeight', topRectHeight);
  } else if (data.type == window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR) {
    let bottomRectHeight = data.area.bottomRect.height;
    AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight);
  }
});

5、 在页面中声明变量 接收就行了

// 底部避让区域高度
@StorageProp('bottomRectHeight')
bottomRectHeight: number = 0;
// 顶部高度
@StorageProp('topRectHeight')
topRectHeight: number = 0;

6、使用padding 挤出来安全区的高度  即可

.padding({
  bottom: px2vp(this.bottomRectHeight)
})
.padding({
  top: px2vp(this.topRectHeight)
})

7、效果展示  

原页面

改后页面

希望对你有所帮助