鸿蒙开发：沉浸式效果实现

前言

沉浸式效果，除了避免状态栏、应用界面和导航条的突兀效果，更多的是提升用户体验，比如下面的效果，当页面中的标题栏颜色和状态栏不一样时，视觉上显然是很突兀的，大家可以纵观市场上的绝大部分主流应用，比如支付宝，微信，或者各个游戏，都会发现，不约而同的都采取了沉浸式的效果。

鸿蒙当中实现沉浸式效果，可以使用安全区域设置或者应用窗口管理进行实现。

安全区域实现沉浸式

安全区域是指页面的显示区域，也就是状态栏、导航栏区域之外的区域，没有特殊的情况，默认下开发者开发的界面都是在安全区域内，如下图，粉色的区域就是安全区域。

如何让安全区域，延伸到安全区外，达到沉浸式的效果，系统中给我们提供expandSafeArea属性，它是一个通用的属性，可以设置到任意的组件上。

 expandSafeArea(types?: Array<SafeAreaType>, edges?: Array<SafeAreaEdge>): T;

两个参数，第一个参数types，类型是Array \<SafeAreaType>，非必填，配置扩展安全区域的类型，当未添加metadata配置项时，页面不避让挖孔, CUTOUT类型不生效；第二个参数edges，类型是Array \<SafeAreaEdge>，也是非必填，配置扩展安全区域的方向。

SafeAreaType

扩展安全区域的枚举类型

名称	描述
SYSTEM	系统默认非安全区域，包括状态栏、导航栏。
CUTOUT	设备的非安全区域，例如刘海屏或挖孔屏区域。
KEYBOARD	软键盘区域。

SafeAreaEdge

扩展安全区域的方向

名称	描述
TOP	上方区域。
BOTTOM	下方区域。
START	前部区域。
END	尾部区域。

比如上面的那个页面，我们设置expandSafeArea属性：

实现效果

.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

可以发现，安全区域，已经延伸至了状态栏和导航条，实现了沉浸式的效果，当然了，具体的方向可以自己动态设置。

注意事项

在使用expandSafeArea属性时，有几点需要注意：

第一点，如果你的父容器是滚动容器，比如Scroll，所设置的expandSafeArea属性是没有效果的，这个千万要注意。

第二点，expandSafeArea属性是给组件设置的，也就是不会影响到别的页面，只对当前的页面有效果，所以，如果是所有页面的沉浸式，可以选择应用窗口管理进行实现。

第三点，如果使用到了expandSafeArea属性，它会延伸至非安全区域，也就是安全区域的页面会上移或者下移，那么在内容区域中，一定要绘制好组件，避免状态栏或导航栏覆盖内容区域，这也是非常重要的，一般需要获取导航条或状态栏的高度，让内容在其上或其下即可。

导航条和状态栏高度获取：

let type = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR; // 以导航条避让为例
let avoidArea = windowClass.getWindowAvoidArea(type);
let bottomRectHeight = avoidArea.bottomRect.height; // 获取到导航条区域的高度


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

应用窗口管理实现沉浸式

应用窗口管理，有一点好处是，可以让所有的页面统一实现沉浸式的效果，使用window中setWindowLayoutFullScreen方法，主要作用是设置主窗口或子窗口的布局是否为沉浸式布局。

相关代码如下：

let windowClass: window.Window = windowStage.getMainWindowSync(); // 获取应用主窗口
      // 1. 设置窗口全屏
      let isLayoutFullScreen = true;
      windowClass.setWindowLayoutFullScreen(isLayoutFullScreen).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. Cause:' + JSON.stringify(err));
      });

由于需要window.WindowStage参数，可以在UIAbility中的onWindowStageCreate方法里实现，设置后，就实现了沉浸式效果，而且是所有的页面。

窗口管理中，也是需要注意，当沉浸式设置之后，安全区域的内容，一定要避开导航条和状态栏，和上面的安全区域实现的方式是一样的，这个一定要注意。

状态栏属性设置

当然了，窗口管理中，不仅仅可以实现沉浸式的效果，还可以更改状态栏的背景，字体颜色等功能，比如，我们把状态栏背景设置成红色背景，白色字体。

let SystemBarProperties: window.SystemBarProperties = {
      statusBarColor: '#ff0000',
      statusBarContentColor: "#ffffff",
    };

    try {
      windowClass.setWindowSystemBarProperties(SystemBarProperties).then(() => {
        console.info('Succeeded in setting the system bar properties.');
      }).catch((err: BusinessError) => {
        console.error(`Failed to set the system bar properties. Cause code: ${err.code}, message: ${err.message}`);
      });
    } catch (exception) {
      console.error(`Failed to set the system bar properties. Cause code: ${exception.code}, message: ${exception.message}`);
    }

window.SystemBarProperties中还有着其它的属性，比如navigationBarColor：导航栏背景颜色，navigationBarContentColor：导航栏文字颜色等等，可以根据自身需要进行设置。

导航条和状态栏隐藏，一般会出现游戏中。

设置状态栏隐藏

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}`);
});

设置导航条隐藏

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}`);
});

相关总结

沉浸式效果实现后，一定要注意安全区域的内容避让，防止内容延伸后被导航条或者状态栏遮挡，具体是选择安全区域或者窗口管理方式，按照需求进行处理，如果仅仅是某个页面，直接安全区域即可。