在app開發(fā)中，經(jīng)常會有要求應用為沉浸式狀態(tài)欄，提升用戶的使用體驗。在鴻蒙中如何設(shè)置呢？

一、如何實現(xiàn)全屏

實現(xiàn)全屏的邏輯很簡單，通過window的setWindowLayoutFullScreen方法，傳入true，即可設(shè)置顯示方式為全屏。

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

全局全屏顯示：可以在EntryAbility的onWindowStageCreate方法中，當 windowStage.loadContent()的回調(diào)執(zhí)行時，進行設(shè)置。

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進行啟用和關(guān)閉

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

全屏顯示效果

二、全屏之后避讓狀態(tài)欄高度

雖然全屏實現(xiàn)了，但是我們看到，想要顯示的內(nèi)容被狀態(tài)欄遮住了。為了保證UI的顯示，需要主動避讓狀態(tài)欄區(qū)域。

@State fullScreen: boolean = false
// 避讓區(qū)域，設(shè)置內(nèi)容延伸到狀態(tài)欄之后，需要主動設(shè)置避讓區(qū)域
@State avoidArea: window.AvoidArea | undefined = undefined
@State bgColor: ResourceColor = '#3b414d'

aboutToAppear(): void {
  // 獲取避讓的區(qū)域
  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() {
    // 主動設(shè)置一塊空白區(qū)域進行占位
    if (this.fullScreen){
      Blank()
        .height(px2vp(this.avoidArea?.topRect.height))
        .backgroundColor(this.bgColor)
    }
  }
}

避讓之后的顯示

可以看到，避讓之后，已經(jīng)可以正常顯示內(nèi)容了。

三、其他

1、修改狀態(tài)欄顏色
此方案雖然可以修改狀態(tài)欄顏色，但是當向上滑動屏幕，展示出任務窗口時，狀態(tài)欄顏色會失效。

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、隱藏導航欄、狀態(tài)欄

      // 實現(xiàn)沉浸式效果。方式一：設(shè)置導航欄、狀態(tài)欄不顯示。
      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));
        });