在鸿蒙的开发中，开发应用沉浸式效果主要通过窗口全屏布局方案和组件安全区方案两种。窗口全屏布局方案就是调整布局系统为全屏布局，界面元素延伸到状态栏和导航区域实现沉浸式效果。组件安全区方案即是布局系统保持安全区内布局，然后通过接口延伸绘制内容（如背景色，背景图）到状态栏和导航区域实现沉浸式效果。

一、窗口全屏布局方案

（1）主要实现方式和步骤

• 设置全局沉浸式
• 获取布局避让遮挡的区域（选择性避让，根据自己的实际需求）
• 隐藏导航栏、状态栏（应用扩展布局，隐藏避让区）
• 注册监听函数，动态获取避让区域数据

（2）实例代码

onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

    windowStage.loadContent('pages/Index', (err) => {
      if (err.code) {
        hilog.error(DOMAIN, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));
        return;
      }
      this.setWindowLayoutFull(windowStage)

      hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');
    });
  }
  //设置全局沉浸式
  setWindowLayoutFull(windowStage: window.WindowStage){
    let windowClass= windowStage.getMainWindowSync()
    AppStorage.setOrCreate('windowClass',windowClass)
    windowClass.setWindowLayoutFullScreen(true)
    // EntryAbility.ets
    // 2. 获取布局避让遮挡的区域
    let type = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR; // 此处以导航条避让为例
    let avoidArea = windowClass.getWindowAvoidArea(type);
    let bottomRectHeight = avoidArea.bottomRect.height; // 获取到导航区域的高度
    AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight);


    type = window.AvoidAreaType.TYPE_SYSTEM; // 以状态栏避让为例
    avoidArea = windowClass.getWindowAvoidArea(type);
    let topRectHeight = avoidArea.topRect.height; // 获取状态栏区域高度
    AppStorage.setOrCreate('topRectHeight', topRectHeight);

    // EntryAbility.ets
    // 2. 设置状态栏隐藏
    /*windowClass.setSpecificSystemBarEnabled('status', false).then(() => {
      console.info('Succeeded in setting the status bar to be invisible.');
    }).catch((err: BusinessError) => {
      console.error(`Failed to set the status bar to be invisible. Code is ${err.code}, message is ${err.message}`);
    });*/
    // 2. 设置导航区域隐藏
    /*windowClass.setSpecificSystemBarEnabled('navigationIndicator', false).then(() => {
      console.info('Succeeded in setting the navigation indicator to be invisible.');
    }).catch((err: BusinessError) => {
      console.error(`Failed to set the navigation indicator to be invisible. Code is ${err.code}, message is ${err.message}`);
    });*/

    // EntryAbility.ets
    // 3. 注册监听函数，动态获取避让区域数据
    windowClass.on('avoidAreaChange', (data) => {
      if (data.type === window.AvoidAreaType.TYPE_SYSTEM) {
        let topRectHeight = data.area.topRect.height;
        AppStorage.setOrCreate('topRectHeight', topRectHeight);
      } else if (data.type == window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR) {
        let bottomRectHeight = data.area.bottomRect.height;
        AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight);
      }
    });


  }

二、组件安全区方案

   （1）主要实现方式和步骤

•       状态栏和导航区域颜色相同场景，可以通过设置窗口的背景色来实现沉浸式效果。窗口背景色可通过setWindowBackgroundColor()进行设置。
• 状态栏和导航区域颜色不同时，可以使用expandSafeArea属性扩展安全区域属性进行调整。

  （2）使用实例

struct OnePage {
  @State message: string = 'Hello World';

  aboutToAppear(): void {
     // 设置当前全窗颜色和状态栏、导航栏颜色一致
    (AppStorage.get('windowClass') as window.Window).setWindowBackgroundColor('#d5d5d5')
  }

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('OnePageHelloWorld')
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => {
          this.message = 'Welcome';
        })
    }
     // 设置顶部绘制延伸到状态栏
    .expandSafeArea([SafeAreaType.KEYBOARD],[SafeAreaEdge.TOP,SafeAreaEdge.BOTTOM])
    .height('100%')
    .width('100%')
  }
}