鸿蒙沉浸式效果开发指南

两种核心实现方案：

方案一：全屏模式（推荐）

import window from '@ohos.window';

// 开启全屏
const win = await window.getLastWindow(this.context);
win.setWindowLayoutFullScreen(true); 

需同步处理四个关键区域：

1. 顶部导航栏避让获取状态栏高度，通过 padding-top 避开系统胶囊区域使用 @ohos.systemcapability.applications.screen 获取安全区尺寸
2. 底部 TabBar 避让通过 padding-bottom 预留底部操作栏空间华为设备典型高度：48vp
3. 隐藏状态栏win.setWindowSystemBarEnable(['status']); // 隐藏时间/电量等
4. 隐藏导航条（“小灰条”）win.setWindowSystemBarEnable(['navigation']); // 消除底部虚拟按键条

适用场景：视频播放、游戏、阅读等强沉浸应用

方案二：组件级安全区扩展

// 允许组件绘制延伸到系统安全区
Column() {
  Image($r('app.media.banner'))
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP]) 
}

参数说明：

✅ 适用场景：单组件全屏展示（如轮播图、详情页头图）

方案对比

避坑指南

1. 异形屏适配：// 检测刘海屏 import display from '@ohos.display'; const cutout = display.getCutoutInfo();
2. 横竖屏切换：// 监听屏幕旋转 window.on('orientationChange', (orientation) => { resetSafeArea(); // 重新计算安全区 });
3. 手势冲突：全屏模式下需手动预留底部上滑手势区域（≥32vp）

最佳实践组合：

// 全屏模式 + 动态安全区计算
win.setWindowLayoutFullScreen(true);
win.setWindowSystemBarEnable(['status', 'navigation']); 

// 页面根容器动态适配
Column() {
  ContentComponent()
}
.margin({ 
  top: $r('app.float.status_bar_height'), 
  bottom: $r('app.float.nav_bar_height') 
})

通过 资源文件 定义不同设备的安全区尺寸：// resources/base/element/float.json { "status_bar_height": "28vp", "nav_bar_height": "48vp" }

效果对比：

• 普通模式：系统栏占用屏幕空间
• 沉浸式效果：应用内容延伸至屏幕边缘，视觉占比提升 15%~20%