HarmonyOS 鸿蒙Next中沉浸式模式怎么开启？

HarmonyOS 鸿蒙Next中沉浸式模式怎么开启？

7 回复

// 开启全屏 const win = windowStage.getMainWindowSync() win.setWindowLayoutFullScreen(true) // 获取安全区域 // 顶部安全区域的高度 const top = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect AppStorage.setOrCreate<number>(‘topHeight’, px2vp(top.height)) // 底部安全区域的高度 const bottom = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR).bottomRect AppStorage.setOrCreate<number>(‘bottomHeight’, px2vp(bottom.height))

更多关于HarmonyOS 鸿蒙Next中沉浸式模式怎么开启？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


2中方法：

其一：通过窗口全屏布局实现，使用 setWindowLayoutFullScreen 方法在 UIAbility 的 onWindowStageCreate 生命周期中设置窗口全屏，隐藏系统默认状态栏和导航栏：

import { UIAbility } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';

export default class EntryAbility extends UIAbility {
  onWindowStageCreate(windowStage: window.WindowStage) {
    windowStage.getMainWindow().then((windowClass) => {
      windowClass.setWindowLayoutFullScreen(true); // 设置全屏布局
    });
    windowStage.loadContent("pages/Index");
  }
}

其二：通过组件安全区扩展

设置 expandSafeArea 属性，在页面组件中扩展安全区域至系统栏，适用于需要动态调整布局的场景：

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('沉浸式内容')
        .expandSafeArea([SafeAreaType.SYSTEM], 
          [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
    }
  }
}

需结合 SafeAreaType 和 SafeAreaEdge 枚举控制扩展范围

沉浸式方案包括2中：

第一种：整个应用沉浸式，只需要在EntryAbility.ets文件中以下方法中设置:

onWindowStageCreate(windowStage: window.WindowStage): void {
    //...省略部分代码
    let windowClass: window.Window | undefined = undefined;
    windowStage.getMainWindow((err: BusinessError, data) => {
        windowClass.setWindowLayoutFullScreen(true);
    })
}

值得注意的是：沉浸式布局生效时，布局不避让状态栏与底部导航区域，组件可能产生与其重叠的情况。

第二种：在需要展现沉浸式的页面单独设置：

aboutToAppear(): void {
    window.getLastWindow(this.getUIContext().getHostContext(), (err, win: window.Window) => {
      win.setWindowLayoutFullScreen(true)
    })
}

aboutToDisappear(): void {
    window.getLastWindow(this.getUIContext().getHostContext(), (err, win: window.Window) => {
      win.setWindowLayoutFullScreen(false)
    })
}

setwindowlayoutfullscreen 属性

可以看一下这个方案：沉浸式页面实现-窗口与屏幕管理-应用框架 - 华为HarmonyOS开发者

有多种实现方案，找到适合自己的

cke_1147.png

在HarmonyOS Next中开启沉浸式模式，需要通过修改Ability的窗口属性实现。在config.json中配置"window"属性：

"window": {
    "designWidth": 720,
    "autoDesignWidth": false,
    "fullScreen": true,
    "statusBar": {
        "background": "#00FFFFFF"
    }
}

或在代码中使用：

let windowClass = window.getTopWindow()
windowClass.setFullScreen(true)
windowClass.setStatusBarBackgroundColor('#00FFFFFF')

关键参数是fullScreen设为true和状态栏背景设为透明。

在HarmonyOS Next中开启沉浸式模式的方法如下：

  1. 在Ability的onWindowStageCreate回调中调用setWindowSystemBarEnable方法：
onWindowStageCreate() {
  let windowClass = window.getLastWindow(this.context);
  windowClass.setWindowSystemBarEnable(["status", "navigation"]);
}
  1. 设置状态栏和导航栏颜色（可选）：
windowClass.setWindowSystemBarProperties({
  statusBarColor: '#00000000', // 透明状态栏
  navigationBarColor: '#00000000' // 透明导航栏
});
  1. 如果需要全屏模式（隐藏所有系统栏）：
windowClass.setFullScreen(true);

注意：

  • 沉浸式模式会让应用内容延伸到系统栏区域
  • 需要自行处理内容与系统栏的重叠问题
  • 不同设备类型的系统栏表现可能有所差异

建议在布局时预留系统栏区域的安全边距，可以使用getWindowAvoidArea接口获取安全区域信息。

回到顶部