HarmonyOS 获取屏幕刘海屏上面刘海区域高度，底部触控区域高度？

Question

let type = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR;
window.getLastWindow(getContext(this)).then((data) => {
  let avoidArea = data.getWindowAvoidArea(type);
  // 获取到导航条区域的高度
  this.topRectHeight = avoidArea.topRect.height;
  this.bottomRectHeight = avoidArea.bottomRect.height;
  console.info(`window topRectHeight is: ${px2vp(this.topRectHeight)}`);
  console.info(`window bottomRectHeight is: ${px2vp(this.bottomRectHeight)}`);
}).catch((err: BusinessError) => {
  console.error(`Failed to obtain the window. Cause: ${JSON.stringify(err)}`);
});

是这样吗？但avoidArea.topRect.height;获取的是0，底部获取的有值

Answer 1

设置的AvoidAreaType属性为TYPE\_NAVIGATION\_INDICATOR，这个属性是只包含导航栏，无法获取状态栏高度，可设置为TYPE\_SYSTEM，TYPE\_SYSTEM属性一般包括状态栏、导航栏，各设备系统定义可能不同具体可查看文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5\#avoidareatype7

对于使用TYPE\_SYSTEM获取的值，top是有值，bottom没值，可参考此demo，可以定义一个中间变量的形式去实现：

import window from '@ohos.window';

@Entry
@Component
struct Page1 {
  @State message: string = 'Hello World';
  @State BOTTOMRECT_HEIGHT: number = 0;
  @State STATUSBAR_HEIGHT: number = 0;

  onPageShow(): void {
    window.getLastWindow(getContext(this), (err, win) => {
      win.setWindowLayoutFullScreen(true);
      let type = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR;
      let avoidArea = win.getWindowAvoidArea(type);
      let bottomRectHeight = px2vp(avoidArea.bottomRect.height);
      this.BOTTOMRECT_HEIGHT = bottomRectHeight
      // Get status bar height.
      let type_status = window.AvoidAreaType.TYPE_SYSTEM;
      let area: window.AvoidArea = win.getWindowAvoidArea(type_status);
      let statusBarHeight = px2vp(area.topRect.height);
      this.STATUSBAR_HEIGHT = statusBarHeight
    })
  }

  build() {
    Column() {
      Blank().height(this.STATUSBAR_HEIGHT).backgroundColor(Color.Pink)
      Text("BOTTOMRECT_HEIGHT:" + this.BOTTOMRECT_HEIGHT)
      Text("STATUSBAR_HEIGHT:" + this.STATUSBAR_HEIGHT)
      // Blank().height(this.BOTTOMRECT_HEIGHT).backgroundColor(Color.Pink).align(Alignment.BottomEnd)
    }
    .height("100%")
    .width('100%')
  }
}