概述
典型应用全屏窗口UI元素包括 状态栏 、应用界面和底部 导航条 。开发应用沉浸式效果主要指通过调整状态栏、应用界面和导航条的显示效果来减少状态栏导航条等系统界面的突兀感。
效果图:
代码实现:
调用setWindowLayoutFullScreen()接口设置窗口全屏,调用 setSpecificSystemBarEnabled() 接口设置状态栏和导航条的具体显示/隐藏状态,此场景下将其设置为隐藏。
import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; import { hilog } from '@kit.PerformanceAnalysisKit'; import { window } from '@kit.ArkUI'; import {DataPreferences}from '@abner/datastore' import {DbUtil}from '@abner/datastore' import { BusinessError } from '@kit.BasicServicesKit';export default class EntryAbility extends UIAbility { ... onWindowStageCreate(windowStage: window.WindowStage): void { ... 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. Code is ${err.code}, message is ${err.message}`); }); // 2. 设置状态栏和导航条隐藏 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}`); });} }