HarmonyOS 鸿蒙Next沉浸式消失

HarmonyOS 鸿蒙Next沉浸式消失 entryability添加沉浸式

index页面 最外层column加了padding 安全区

从index页面跳转其他页面 , 沉浸式没了 什么情况

4 回复

开发者您好,可参考方案一:沉浸式模式下显示避让区(首页是否开启避让自行选择),由于您的场景需要跳转页面,对参考案例进行如下修改:
EntryAbility.ets文件按照步骤1修改,页面文件修改后如下所示:

// Index.ets
@Entry
@Component
struct Index {
  @Provide('pathStack') pathStack: NavPathStack = new NavPathStack();
  @StorageProp('bottomRectHeight') bottomRectHeight: number = 0;
  @StorageProp('topRectHeight') topRectHeight: number = 0;
  @State isAvoidStatus: boolean = false;
  @State isAvoidNavigationIndicator: boolean = false;

  @Builder
  PageMap(name: string) {
    if (name === 'Index02') {
      Index02();
    }
  }

  build() {
    Navigation(this.pathStack) {
      Column() {
        Column({ space: 35 }) {
          Button('跳转').onClick(() => {
            this.pathStack.pushPath({ name: 'Index02' }, false);
          });
          Row({ space: 30 }) {
            if (this.isAvoidStatus) {
              Text('避让状态栏:是');
            } else {
              Text('避让状态栏:否');
            }
            Toggle({ type: ToggleType.Switch, isOn: this.isAvoidStatus })
              .scale({ x: 2, y: 2 })
              .onChange((isOn: boolean) => {
                this.isAvoidStatus = isOn;
              });
          };

          Row({ space: 30 }) {
            if (this.isAvoidNavigationIndicator) {
              Text('避让导航条:是');
            } else {
              Text('避让导航条:否');
            }
            Toggle({ type: ToggleType.Switch, })
              .scale({ x: 2, y: 2 })
              .onChange((isOn: boolean) => {
                this.isAvoidNavigationIndicator = isOn;
              });
          };
        }
        .justifyContent(FlexAlign.Center)
        .alignItems(HorizontalAlign.Center)
        .backgroundColor('#ff1884ef')
        .height('100%')
        .width('100%');
      }
      .padding({
        top: this.isAvoidStatus ? this.getUIContext().px2vp(this.topRectHeight) : 0,
        bottom: this.isAvoidNavigationIndicator ? this.getUIContext().px2vp(this.bottomRectHeight) : 0
      })
      .height('100%')
      .width('100%');
    }.navDestination(this.PageMap)
    .hideTitleBar(true); // 隐藏标题栏
  }
}

@Component
struct Index02 {
  @Consume('pathStack') pathStack: NavPathStack;

  build() {
    NavDestination() {
      Column() {
        Text().width('100%').height(200).backgroundColor(Color.Black);
        Text().width('100%').height(200).backgroundColor(Color.Blue);
        Text().width('100%').height(200).backgroundColor(Color.Gray);
        Text().width('100%').height(200).backgroundColor(Color.Red);
        Text().width('100%').height(200).backgroundColor(Color.Green);
        Text().width('100%').height(200).backgroundColor(Color.Pink);
      };
    }.hideTitleBar(true); // 隐藏标题栏
  }
}

如果以上案例仍然无法解决您的问题,请提供复现问题的demo,以便问题分析解决。

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


您好,能否提供下相关截图?

在鸿蒙Next中,沉浸式消失通常是因为未正确调用window.setWindowLayoutFullScreen(true),或未设置expandSafeAreatrue。使用ArkTS时,需在aboutToAppear中配置getWindow().setWindowLayoutFullScreen(true),并确保布局使用SafeArea组件适配。若使用系统导航栏,需设置navigationBarContentColor透明。具体检查windowStage的配置选项。

沉浸式效果是基于 Window 窗口的,你在 EntryAbility 里做的设置作用于当前窗口。页面跳转后,Window 属性并不会自动重置,但如果新页面没有使用全屏布局、没有设置状态栏/导航栏透明,或者布局没有扩展到安全区,系统会按默认方式绘制系统栏,看起来就像“沉浸式丢了”。实际上窗口仍是沉浸式,只是页面内容没有覆盖到状态栏/导航栏区域。

解决方法:在新页面的 aboutToAppear 中,再次获取窗口并显式声明全屏布局,让页面内容占据整个屏幕。

import window from '@ohos.window';

@Entry
@Component
struct OtherPage {
  aboutToAppear() {
    window.getLastWindow(getContext()).then(win => {
      win.setWindowLayoutFullScreen(true); // 内容延伸到状态栏/导航栏
      win.setWindowSystemBarProperties({
        statusBarColor: '#00000000',     // 状态栏透明
        navigationBarColor: '#00000000'  // 导航栏透明
      });
    });
  }

  build() {
    Column() {
      // 页面内容
    }
    .width('100%')
    .height('100%')
    .padding({ top: 'env(statusBarHeight)' }) // 手动避让安全区
  }
}

如果使用 expandSafeArea,可让 Column 自动避让,语法更简洁:

Column()
  .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])

总之,页面跳转后若需维持沉浸式,必须在新页面中让布局全屏且主动适配安全区。

回到顶部