在app开发中，经常会有要求应用为沉浸式状态栏，提升用户的使用体验。在鸿蒙中如何设置呢？

一、如何实现全屏

实现全屏的逻辑很简单，通过window的setWindowLayoutFullScreen方法，传入true，即可设置显示方式为全屏。

export class MyUIUtils {
  public static setFullScreen(context: Context, status: boolean) {
    window.getLastWindow(context).then((window) => {
      window.setWindowLayoutFullScreen(status)
    })
  }
 }

全局全屏显示：可以在EntryAbility的onWindowStageCreate方法中，当 windowStage.loadContent()的回调执行时，进行设置。

onWindowStageCreate(windowStage: window.WindowStage): void {
  // Main window is created, set main page for this ability
  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
  windowStage.loadContent('pages/Index', (err) => {
    if (err.code) {
      hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
      return;
    }
    hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
    MyUIUtils.setFullScreen(getContext(), true);
  });
}

某个Page全屏显示：，可在Page的onPageShow、onPageHide进行启用和关闭

onPageShow(): void {
  MyUIUtils.setFullScreen(getContext(), true)
}
onPageHide(): void {
  MyUIUtils.setFullScreen(getContext(), false)
}

全屏显示效果

二、全屏之后避让状态栏高度

虽然全屏实现了，但是我们看到，想要显示的内容被状态栏遮住了。为了保证UI的显示，需要主动避让状态栏区域。

@State fullScreen: boolean = false
// 避让区域，设置内容延伸到状态栏之后，需要主动设置避让区域
@State avoidArea: window.AvoidArea | undefined = undefined
@State bgColor: ResourceColor = '#3b414d'

aboutToAppear(): void {
  // 获取避让的区域
  let type = window.AvoidAreaType.TYPE_SYSTEM;
  window.getLastWindow(getContext(this)).then((window) => {
    this.avoidArea = window.getWindowAvoidArea(type);
    Log.d(JSON.stringify(this.avoidArea));
  })
}

build() {
  Column() {
    // 主动设置一块空白区域进行占位
    if (this.fullScreen){
      Blank()
        .height(px2vp(this.avoidArea?.topRect.height))
        .backgroundColor(this.bgColor)
    }
  }
}

避让之后的显示

可以看到，避让之后，已经可以正常显示内容了。

三、其他

1、修改状态栏颜色
此方案虽然可以修改状态栏颜色，但是当向上滑动屏幕，展示出任务窗口时，状态栏颜色会失效。

public static setStatusBarColor(context: Context, statusColor: StatusColor) {
  let windowClass: window.Window | undefined = undefined;
  window.getLastWindow(context, (err: BusinessError, data) => {
    windowClass = data
    let SystemBarProperties: window.SystemBarProperties = {
      statusBarColor: statusColor.statusBarColor,
      navigationBarColor: statusColor.navigationBarColor,
      //以下两个属性从API Version8开始支持
      statusBarContentColor: statusColor.statusBarContentColor,
      navigationBarContentColor: statusColor.navigationBarContentColor
    };
    try {
      let promise = windowClass.setWindowSystemBarProperties(SystemBarProperties);
      promise.then(() => {
        Log.d('Succeeded in setting the system bar properties.')
      }).catch((err: BusinessError) => {
        Log.d(`Failed to set the system bar properties. Cause code: ${err.code}, message: ${err.message}`);
      });
    } catch (exception) {
      Log.d(`Failed to set the system bar properties. Cause code: ${exception.code}, message: ${exception.message}`);
    }
  })
}

2、隐藏导航栏、状态栏

      // 实现沉浸式效果。方式一：设置导航栏、状态栏不显示。
      let names: Array<'status' | 'navigation'> = [];
      windowClass.setWindowSystemBarEnable(names)
        .then(() => {
          console.info('Succeeded in setting the system bar to be visible.');
        })
        .catch((err: BusinessError) => {
          console.error('Failed to set the system bar to be visible. Cause:' + JSON.stringify(err));
        });