HarmonyOS ArkUI沉浸式状态栏

引导

先来看下创建一个默认工程时，状态栏与底部导航栏的样式：可以看到顶部状态是黑色背景颜色，白色文字，与第一个组件的红色背景色有明显分界;底部导航栏背景颜色为白色，按钮颜色为灰色，与最后一个组件的蓝色背景有明显分界。

全屏模式

然后我们先把window设置为全屏模式，先看下文档说明：需要先通过windowState.getMainWindow()获取到window对象，然后调用window.setWindowLayoutFullScreen(true)即可。此全屏模式是指把布局扩展到顶部状态与底部导航栏，而且此时状态栏与导航栏都是可见的。

typescript 复制代码

// 实现代码
onWindowStageCreate(windowStage: window.WindowStage) {
  windowStage.getMainWindow((err, mainWindow: window.Window) => {
    if (err.code) {
      hilog.error(0x0000, TAG, 'Failed to get main window. Cause: %{public}s', JSON.stringify(err) ?? '');
return
    }
    mainWindow.setWindowLayoutFullScreen(true);
  }
}

可以看到第一个组件已经延伸到状态栏里面了，但是这样还不完善，因为组件内容文字与状态栏文字重叠了。

获取状态栏、导航栏高度

一般情况下，如果没有特殊要求，都会给每个页面的根组件设置一个背景色，然后再设置一个padding-top，值为状态栏高度，arkUi中获取状态栏高度方法是通过window去获取。与上一步一样，获取到window对象后直接调用getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)方法即可，里面的topRect就是顶部状态的矩形框，topRect.height即为状态栏高度。

需要注意的是此时获取到的高度的单位为像素(px)，在page中使用的话需要先转为vp，直接使用px2vp即可，如果在UIAbility中找不到此方法，看下Alility文件后缀是不是.ets，如果不是的话建议改一下文件后缀，在ets文件中可以直接使用此方法。

typescript 复制代码

// 实现代码
onWindowStageCreate(windowStage: window.WindowStage) {
  windowStage.getMainWindow((err, mainWindow: window.Window) => {
    if (err.code) {
      hilog.error(0x0000, TAG, 'Failed to get main window. Cause: %{public}s', JSON.stringify(err) ?? '');
return
    }
    mainWindow.setWindowLayoutFullScreen(true);
  
    let avoidArea: window.AvoidArea = mainWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
    let vpStatusBarHeight: number = px2vp(avoidArea.topRect.height)
    let vpNavigationBarHeight: number = px2vp(avoidArea.bottomRect.height)
    
    let targetSystemArea: SystemArea = {
      statusBarHeight: vpStatusBarHeight,
      navigationBarHeight: vpNavigationBarHeight
    }

    // 保存到工具类中
    WindowHelper.setSystemArea(targetSystemArea)
  }
}

可以把获取到的状态栏高度保存到ShardLocalStorage中，用的时候从@LocalStorageProp中取；也可以保存到工具类中，用的时候从工具类中取。根据业务决定怎么方便怎么用。

typescript 复制代码

Column() {
  // ...
}
.width('100%')
.justifyContent(FlexAlign.Start)
.backgroundColor(Color.Yellow)
.alignItems(HorizontalAlign.Start)
.padding({ top: WindowHelper.getStatusBarHeight() })

可以看到根组件的背景色显示出了状态栏高度的那一部分，正常业务调整背景色或者第一个组件的背景色都可以。

隐藏状态栏、导航栏

在全屏模式下，默认还是会显示状态栏与导航栏，如果需要完全的沉浸式体验，例如看视频或者打游戏，都需要隐藏状态栏与导航栏，此时可以调用window.setWindowSystemBarEnable实现。如果不需要显示，则传入一个空数组即可。如果需要显示哪个，就传入哪一个系统bar的名称即可，如status或navigation

typescript 复制代码

// 实现代码
onWindowStageCreate(windowStage: window.WindowStage) {
  windowStage.getMainWindow((err, mainWindow: window.Window) => {
    if (err.code) {
      hilog.error(0x0000, TAG, 'Failed to get main window. Cause: %{public}s', JSON.stringify(err) ?? '');
return
    }
    mainWindow.setWindowLayoutFullScreen(true);
    
    // 隐藏状态栏与导航栏
    mainWindow.setWindowSystemBarEnable([]);
    
    // 显示状态栏、隐藏导航栏
    // mainWindow.setWindowSystemBarEnable(["status"]);
    
    // 隐藏状态栏、显示导航栏
    // mainWindow.setWindowSystemBarEnable(["navigation"]);
    
    // 显示状态栏、显示导航栏
    // mainWindow.setWindowSystemBarEnable(["status", "navigation"]);
  }
}

设置状态栏颜色

typescript 复制代码

// 实现代码
onWindowStageCreate(windowStage: window.WindowStage) {
  windowStage.getMainWindow((err, mainWindow: window.Window) => {
    if (err.code) {
      hilog.error(0x0000, TAG, 'Failed to get main window. Cause: %{public}s', JSON.stringify(err) ?? '');
return
    }
    mainWindow.setWindowSystemBarProperties({
      statusBarColor: "#FFFF00",
      statusBarContentColor: "#0A59F7"
    })
  }
}

支持设置的系统栏颜色

以上实现基于HarmonyOS 3.1.0(API 9)(ArkTS 3.2.12.5)，如有不对的地方，请多包容，感谢指正。