探索鸿蒙应用开发中的沉浸式模式与安全区域文字颜色

在鸿蒙应用开发中，实现沉浸式显示模式与改变安全区域文字颜色 可以为用户带来更加流畅和美观的视觉体验，本文将详细介绍如何在鸿蒙应用中实现特定页面的沉浸式显示，以及在这个过程中遇到的问题和解决方案。

效果展示

开启沉浸式模式

关闭沉浸式模式

改变安全区域文字颜色

一、需求背景

我们的目标是在鸿蒙应用中实现 “我的” 页面的全屏沉浸式显示以及改变安全区域文字颜色，而其他页面不需要这种显示模式。

二、实现过程中的挑战与解决方案

1.初步尝试与问题

起初，当我们想要设置某个组件的沉浸式模式，可以通过在当前的aboutToAppear中使用window模块的getLastWindow和setWindowLayoutFullScreen两个方法来处理全屏显示。但是当我们设置完毕以后，会发现我们在任何一个页面设置过一次以后，其他页面也会跟着全屏显示，这也导致出一个新问题，当我们从其他tab标签进入 其他tab标签时，会出现底部tab栏闪动的问题。很明显，这是我们不愿意看到的

2.调整策略与新问题

首先，解决tab栏闪动这个问题，我们可以将所有页面的全屏模式都开启，但是，这又会带给我们一个新的BUG，那就是我们只有部分页面需要全屏显示，不需要全屏显示的页面内容会突破安全区域显示，导致内容显示不正常。

3.解决内容突破安全区问题

在aboutToAppear中使用window模块getLastWindow和setWindowLayoutFullScreen两个方法来处理整个应用的全屏显示后，需要通过获取手机的安全高度来结合padding适配顶部内容的正常显示。具体步骤如下：

通过window模块的getLastWindow和getWindowAvoidArea来获取安全高度。安全高度获取到的是px单位，需要使用px2vp函数转换成vp单位。

 最后将安全区域高度保存到AppStorage中共享给其他页面使用。从AppStorage中获取安全区域高度，结合padding适配页面内容的顶部显示。

4.设置安全区域文字颜色

 使用window模块getLastWindow和
setWindowSystemBarProperties({statusBarContentColor:颜色})来设置安全区域文字颜色。可以设置为其他颜色

5.沉浸式模式类封装

在鸿蒙应用开发过程中，为了实现更高效的开发和更好的用户体验，我们常常需要对特定的功能进行封装和优化。在沉浸式模式和安全区域设置方面，为了更好地管理这些复杂的功能，我们封装了安全区域工具类windowManager.ets。

通过这个工具类，我们可以在需要开启沉浸式模式的页面轻松调用相应的方法，极大地提高了代码的可复用性。不再需要在每个页面中重复编写复杂的沉浸式模式和安全区域设置代码，只需简单地调用工具类中的方法，即可实现所需的功能。

示例如下：

enableFullScreen - 开启全屏。

disableFullScreen - 关闭全屏。

settingStatusBarLight - 设置状态栏文字为白色。

settingStatusBarDark - 设置状态栏域文字为黑色。

三、总结

通过以上一系列的操作，我们成功地在鸿蒙应用中实现了特定页面的沉浸式显示和更改安全区域的颜色，同时解决了在实现过程中遇到的各种问题。这不仅提升了应用的视觉效果，也为用户带来了更好的使用体验。在鸿蒙应用开发中，不断探索和解决各种问题，能够让我们的应用更加完善和出色。