HarmonyOS 鸿蒙Next沉浸式消失
HarmonyOS 鸿蒙Next沉浸式消失 entryability添加沉浸式
index页面 最外层column加了padding 安全区
从index页面跳转其他页面 , 沉浸式没了 什么情况
开发者您好,可参考方案一:沉浸式模式下显示避让区(首页是否开启避让自行选择),由于您的场景需要跳转页面,对参考案例进行如下修改:
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),或未设置expandSafeArea为true。使用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])
总之,页面跳转后若需维持沉浸式,必须在新页面中让布局全屏且主动适配安全区。

