HarmonyOS 鸿蒙Next-沉浸式详解与实战

HarmonyOS 鸿蒙Next-沉浸式详解与实战

在鸿蒙系统（HarmonyOS）的开发中，ArkUI作为前端框架，为开发者提供了丰富的组件和API来实现各种UI效果。沉浸式屏幕设计是现代应用追求的一种用户体验，旨在通过全屏布局和统一的界面元素颜色来减少系统界面的突兀感，从而使用户获得更佳的视觉体验。本文将介绍在ArkUI中实现沉浸式屏幕的一些解决方案。

一、沉浸式屏幕的基本概念 沉浸式屏幕设计主要是指通过调整状态栏、应用界面和导航条的显示效果，使它们之间的过渡更加平滑，减少突兀感。在鸿蒙系统中，状态栏和导航条通常被称为避让区，而避让区之外的区域则称为安全区。

二、实现沉浸式屏幕的方法 setWindowLayoutFullScreen方法 鸿蒙系统提供了setWindowLayoutFullScreen方法来设置全屏布局。当参数为true时，表示全屏显示；当参数为false时，表示非全屏显示。

import { window } from '@kit.ArkUI';
onWindowStageCreate(windowStage: window.WindowStage): void {
windowStage.getMainWindow().then((window) => {
window.setWindowLayoutFullScreen(true);
});
}

注意：这种方法会将所有页面都设置为沉浸式，如果某些页面不需要沉浸式效果，需要在页面中通过获取window对象来关闭。

设置背景色实现沉浸式 如果只需要背景统一，实现状态栏、导航栏和主内容区的颜色统一，可以通过设置整体窗口的背景色来实现视觉上的沉浸式效果。

onWindowStageCreate(windowStage: window.WindowStage): void {
    windowStage.getMainWindowSync().setWindowBackgroundColor("#9F6BF5");
}

使用expandSafeArea属性 expandSafeArea是一个按需的方式，哪个页面需要使用沉浸式，就直接在该页面设置expandSafeArea属性。

let avoidArea = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
let bottomRectHeight = avoidArea.bottomRect.height; // 获取导航条区域高度

获取并避让避让区 当不隐藏避让区时，可以通过接口查询状态栏和导航条区域，进行可交互元素的避让处理。使用getWindowAvoidArea接口获取当前布局遮挡区域（如状态栏、导航条），然后根据获取到的区域信息动态调整页面布局。

let avoidArea = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
let bottomRectHeight = avoidArea.bottomRect.height; // 获取导航条区域高度

注册监听函数，动态获取避让区域的实时数据：

windowClass.on('avoidAreaChange', (data) => {
    if (data.type === window.AvoidAreaType.TYPE_SYSTEM) {
        let topRectHeight = data.area.topRect.height;
        // 处理状态栏高度变化
    } else if (data.type === window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR) {
        let bottomRectHeight = data.area.bottomRect.height;
        // 处理导航条高度变化
    }
});

设置SystemBarProperties 将SystemBarProperties的背景设置为透明，contentColor随页面变化实现沉浸效果。但需要注意给状态栏预留空间，避免应用内容入侵状态栏。

window.setWindowSystemBarProperties({
    statusBarColor: "#00ffffff", // 透明
    statusBarContentColor: "#ffffff", // 根据应用背景色调整
    navigationBarColor: "#00ffffff", // 透明
    navigationBarContentColor: "#ffffff" // 根据应用背景色调整
});

在页面最外层的容器组件上设置padding.top，为状态栏预留空间（具体值随设备类型可能有变化）。

三、注意事项 沉浸式屏幕设计需要考虑UI元素的避让处理，避免可交互元素和应用关键信息放置在导航条区域。 根据不同设备和屏幕尺寸，可能需要调整沉浸式效果的实现方式。 在实现沉浸式屏幕时，要注意保持应用的一致性和用户体验。