arkts-状态栏，导航栏等

api 12 及以上，不定期更新

沉浸式

在 项目 EntryAbility 中的 onWindowStageCreate 方法中添加代码

// 代码 1
let windowClass: window.Window = windowStage.getMainWindowSync(); // 获取应用主窗口
// 1. 设置窗口全屏
windowClass.setWindowLayoutFullScreen(true)
  .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. Code is ${err.code}, message is ${err.message}`);
  });

此时布局内容就可以放进状态栏中，但设置这个实际上是全局，意味着所有的 page 都会全屏

状态栏(statusBar)高度，导航栏(navigationBar)高度

同样是在项目 EntryAbility 中的 onWindowStageCreate 方法

// 代码 2
//导航条
let typeBottom = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR; 
let avoidArea = windowClass.getWindowAvoidArea(typeBottom);
let bottomRectHeight = avoidArea.bottomRect.height; // 获取到导航条区域的高度
//缓存到本地，因为获取到的但是为px，如需要在build中使用，还需要转成 vp，使用方法 px2vp()
AppStorage.setOrCreate('bottomRectHeight', px2vp(bottomRectHeight));

//状态栏
let typeTop = window.AvoidAreaType.TYPE_SYSTEM;
let avoidAreaTop = windowClass.getWindowAvoidArea(typeTop);
let topRectHeight = avoidAreaTop.topRect.height; // 获取到导航条区域的高度
AppStorage.setOrCreate('topRectHeight', px2vp(topRectHeight));

在需要用到的地方，就使用 AppStorage 获取

AppStorage.get<number>("topRectHeight")!

修改状态栏文字颜色

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


aboutToAppear(): void {
window.getLastWindow(getContext(this)).then((lastWindow) => {
  lastWindow.setWindowSystemBarProperties({
    statusBarContentColor: "#000000"
  })
})
}

修改完毕之后状态栏文本颜色会变成黑色，但是使用 router 路由到下一个 page 或退回到上一个page时，状态栏文本还是黑色（假设其他页面是白色），此时，就需要在退出时重设状态栏文本，代码如下

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


private lastStatusBarContentColor: string | undefined = ""


aboutToAppear(): void {
    window.getLastWindow(getContext(this)).then((lastWindow) => {

      this.lastStatusBarContentColor = lastWindow.getWindowSystemBarProperties().statusBarContentColor

      lastWindow.setWindowSystemBarProperties({
        statusBarContentColor: "#000000"
      })
    })
}

//退出时重新设置文本颜色
aboutToDisappear(): void {
  window.getLastWindow(getContext(this)).then((lastWindow) => {
    lastWindow.setWindowSystemBarProperties({
      statusBarContentColor: this.lastStatusBarContentColor
    })
  })
}