HarmonyOS 鸿蒙Next开发案例 | 沉浸式界面实现方式之三：隐藏状态栏/导航栏方式

HarmonyOS 鸿蒙Next开发案例 | 沉浸式界面实现方式之三：隐藏状态栏/导航栏方式

场景说明

沉浸式界面通常是指全屏显示，即当前画面占据整个屏幕。画面放大的同时，让用户摆脱无关信息的干扰，带给用户沉浸式的体验。常见的场景有：视频播放、游戏等。本例即为大家介绍如何沟通隐藏状态栏/导航栏开发沉浸式界面。

效果呈现

本例中的沉浸式界面对应效果如下：

运行环境

本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：

• IDE: DevEco Studio 3.1.1 Release
• SDK: 3.1.0(API 9)

实现思路

使用setWindowSystemBarEnable设置导航栏和状态栏为隐藏状态。

说明： 沉浸式的设置最好放在ability的onWindowStageCreate的生命周期里，此时刚好可以获取窗口的信息，放在页面页面生命周期里会出现窗口大小不一致，影响体验。

开发步骤

隐藏状态栏、导航栏可以达到完全沉浸的效果，使用setWindowSystemBarEnable接口即可实现。

具体代码如下：

import window from '@ohos.window';
import common from '@ohos.app.ability.common';
@Entry
@Component
struct Type3 {
@State message: string = ‘Hello World’
context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext
async setSystemBar() {
let windowClass = await window.getLastWindow(context)
//设置导航栏，状态栏不可见
await windowClass.setWindowSystemBarEnable([])
}
aboutToAppear() {
this.setSystemBar()
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width(‘100%’)
}
.backgroundColor("#ffee33")
.height(‘100%’)
}
}