前言
沉浸式效果，除了避免状态栏、应用界面和导航条的突兀效果，更多的是提升用户体验，比如下面的效果，当页面中的标题栏颜色和状态栏不一样时，视觉上显然是很突兀的，大家可以纵观市场上的绝大部分主流应用，比如支付宝，微信，或者各个游戏，都会发现，不约而同的都采取了沉浸式的效果。
鸿蒙当中实现沉浸式效果，可以使用安全区域设置或者应用窗口管理进行实现。
安全区域实现沉浸式
安全区域是指页面的显示区域，也就是状态栏、导航栏区域之外的区域，没有特殊的情况，默认下开发者开发的界面都是在安全区域内，如下图，粉色的区域就是安全区域。
如何让安全区域，延伸到安全区外，达到沉浸式的效果，系统中给我们提供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}`); });
相关总结
沉浸式效果实现后，一定要注意安全区域的内容避让，防止内容延伸后被导航条或者状态栏遮挡，具体是选择安全区域或者窗口管理方式，按照需求进行处理，如果仅仅是某个页面，直接安全区域即可。
