HarmonyOS 鸿蒙Next中沉浸页面问题

HarmonyOS 鸿蒙Next中沉浸页面问题

可以设置状态栏不沉浸，但导航栏沉浸吗，

windowClass.setWindowLayoutFullScreen 设置为 true 的时候只能两个一块沉浸，可以单独设计吗
6 回复

通过独立控制导航栏透明度与状态栏显隐，配合布局避让机制，实现导航沉浸与状态栏正常显示的共存效果。楼主参考以下案例：

// 页面组件实现
import window from '@kit.Window';

@Entry
@Component
struct ImmersiveNavPage {
  @State statusBarHeight: number = 0

  aboutToAppear() {
    // 获取窗口实例
    const win = window.getLastWindow(this.context)
    
    // 设置导航栏沉浸
    win.setWindowSystemBarProperties({
      navigationBarColor: '#00000000', // 导航栏透明
      navigationBarContentColor: '#00FFFFFF', // 隐藏导航图标
      statusBarColor: '#FFFFFFFF' // 状态栏白色背景
    })

    // 获取状态栏高度
    const avoidArea = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
    this.statusBarHeight = avoidArea.topRect.height
  }

  aboutToDisappear() {
    // 恢复系统默认设置
    const win = window.getLastWindow(this.context)
    win.setWindowSystemBarProperties({
      navigationBarColor: '#FFFFFFFF',
      navigationBarContentColor: '#FF000000',
      statusBarColor: '#FFFFFFFF'
    })
  }

  build() {
    Column() {
      Text('沉浸导航栏示例')
        .fontSize(20)
        .margin({ top: 20 })
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.White)
    .padding({ top: this.statusBarHeight }) // 避让状态栏区域
  }
}

更多关于HarmonyOS 鸿蒙Next中沉浸页面问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


  1. 楼主不想开启全局的沉浸式只是针对单个页面的话可以用expandSafeArea这个属性来控制单个页面的拓展场景，参数设置为这样就只会往上面移除，不会往下面移除
.expandSafeArea([SafeAreaType.SYSTEM, SafeAreaType.CUTOUT, SafeAreaType.KEYBOARD],
  [SafeAreaEdge.TOP, SafeAreaEdge.START, SafeAreaEdge.END])

  1. 楼主采用的是全局沉浸式模式的话可以根据路由框架来处理，比如HMRouter，你更改模版来实现

  2. 全局开启沉浸式，不分页面在padding

可以尝试如下方案

步骤1：获取应用主窗口

// 在UIAbility的onWindowStageCreate中获取主窗口
import { window } from '@kit.ArkUI';

let mainWindow: window.Window | undefined = undefined;
windowStage.getMainWindow((err: BusinessError, data) => {
    if (err) {
        console.error('Failed to get main window');
        return;
    }
    mainWindow = data;
});

步骤2：配置系统栏显隐及属性

// 设置状态栏显示，导航栏隐藏
mainWindow.setWindowSystemBarEnable(['status']).then(() => {
    console.info('Enabled status bar');
});

// 设置导航栏透明（沉浸效果）
let sysBarProps: window.SystemBarProperties = {
    navigationBarColor: '#00000000', // 透明色
    navigationBarContentColor: '#FFFFFF' // 导航栏图标/文字颜色
};

mainWindow.setWindowSystemBarProperties(sysBarProps)
.then(() => {
    console.info('Set navigation bar properties');
});

步骤3：设置全屏布局

// 使内容延伸到导航栏区域
mainWindow.setWindowLayoutFullScreen(true)
.then(() => {
    console.info('Set full screen layout');
});

步骤4：处理状态栏避让

// 获取状态栏避让区域并调整布局
let avoidArea = mainWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
console.info('Status bar height: ' + avoidArea.topRect.height);
// 根据高度设置页面顶部padding

实现思路

分栏控制：通过 setWindowSystemBarEnable 接口单独控制状态栏和导航栏的显隐。

属性分离设置：使用 setWindowSystemBarProperties 分别设置导航栏的透明度和颜色，使其与主窗口背景融合。

避让处理：通过 getWindowAvoidArea 获取状态栏高度，调整页面布局避开状态栏区域。

不知道是否为你需要实现的效果

在 HarmonyOS 的 ArkTS 开发中，状态栏和导航栏的沉浸效果通常是联动控制的，目前的系统 API 设计暂时不支持直接分离两者的沉浸状态（即设置状态栏不沉浸而导航栏完全沉浸）。

方案一：导航栏透明 + 填充占位（视觉沉浸）

导航栏视觉上透明（沉浸），但内容底部通过 Spacer 或 padding 补偿高度，避免实际交互冲突。状态栏保持可见，内容正常避让顶部区域。

在HarmonyOS Next中实现沉浸式页面需使用UIAbility和Window模块。通过windowClass.setWindowSystemBarEnable(["status", "navigation"], false)可隐藏状态栏和导航栏。沉浸式效果需搭配ets组件全屏布局，使用fit-content属性适配异形屏。开发者需在module.json5中配置"window": {"fullScreen": true}。注意沉浸模式下系统手势操作会失效，需自行处理返回逻辑。

在HarmonyOS Next中，可以通过以下方式实现单独沉浸导航栏而保留状态栏：

  1. 使用WindowManager的setWindowSystemBarEnable方法单独控制：
let windowClass = window.getTopWindow()
windowClass.setWindowSystemBarEnable({
    statusBar: true,  // 保持状态栏显示
    navigationBar: false  // 隐藏导航栏
})
  1. 如果需要自定义导航栏沉浸效果，可以结合setWindowLayoutFullScreen和setWindowSystemBarEnable使用：
windowClass.setWindowLayoutFullScreen(true)
windowClass.setWindowSystemBarEnable({
    statusBar: true,
    navigationBar: false
})

注意：这种方式下状态栏会保持显示但内容会延伸到状态栏区域下方，需要自行处理状态栏区域的padding。

回到顶部