HarmonyOS 鸿蒙Next ArkUI 状态栏沉浸效果实现 | 获取状态栏高度

HarmonyOS 鸿蒙Next ArkUI 状态栏沉浸效果实现 | 获取状态栏高度 API版本：8

效果类似如下

// 设置应用窗口沉浸模式
window.getTopWindow((err, mainWindowClass) => {
  if (err) {
    console.error('Failed to get the subWindow. Cause: ' + JSON.stringify(err))
    return
  }
  // 将UI内容顶入状态栏下方
  mainWindowClass.setLayoutFullScreen(true, (e, data) => {
    // 设置状态栏透明背景
    let SystemBarProperties = {
      statusBarColor: '#00000000'
    }
    //设置窗口内导航栏、状态栏的属性，使用callback异步回调。
    mainWindowClass.setSystemBarProperties(SystemBarProperties, (err) => {
      if (err) {
        console.error('Failed to set the system bar properties. Cause: ' + JSON.stringify(err))
        return
      }
      console.info('Succeeded in setting the system bar properties.')
      mainWindowClass.getAvoidArea(window.AvoidAreaType.TYPE_SYSTEM, (err, data) => {
        if (err) {
          console.error('Failed to obtain the area. Cause:' + JSON.stringify(err));
          return;
        }
        this.topmargin = data.topRect.height
        // 保存高度信息
        Context.set('systemBarHeight', this.topmargin)
        console.info('Succeeded in obtaining the area. Data:' + JSON.stringify(data));
      })
    })
  })
})

其中getVoidArea方法返回的结果如下：

{
  "bottomRect": {
    "height": 0,
    "left": 0,
    "top": 0,
    "width": 0
  },
  "leftRect": {
    "height": 0,
    "left": 0,
    "top": 0,
    "width": 0
  },
  "rightRect": {
    "height": 0,
    "left": 0,
    "top": 0,
    "width": 0
  },
  "topRect": {
    "height": 126,
    "left": 0,
    "top": 0,
    "width": 0
  }
}

再在布局中使用状态栏高度信息即可实现沉浸效果