沉浸式是什么
沉浸式让整个App的界面浸入整个屏幕,在某些业务场景下,一种友好的用户体验。
鸿蒙上沉浸式实现
应用设置全屏
具体方式是调用setWindowLayoutFullScreen接口,设置应用主窗口为全屏布局;setWindowSystemBarProperties接口,设置导航栏、状态栏的透明度、背景/文字颜色以及高亮图标等属性,使之保持与主窗口显示协调一致,从而达到沉浸式效果。
也就是默认全栈统一沉浸式,路由拦截器拦截,不需要沉浸式页面设置顶部和底部margin,顶部为动态获取状态栏高度,底部为动态获取系统导航栏高度。
windowStage.getMainWindow().then((windowObj) => {
windowObj.setWindowLayoutFullScreen(true)
let type = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR;
let avoidArea = windowObj.getWindowAvoidArea(type);
let bottomRectHeight = px2vp(avoidArea.bottomRect.height);
let type_status = window.AvoidAreaType.TYPE_SYSTEM;
let area: window.AvoidArea = windowObj.getWindowAvoidArea(type_status);
let statusBarHeight = px2vp(area.topRect.height);
})
实际操作中会遇到的问题点:
每一个页面不可能实时获取状态栏和导航栏的高度,这就需要在获取到时候设置到AppStorage,但是在各个页面获取时候,如果拿不到就会存在样式问题。
export function configSystemBarWhiteColor() {
let systemBarProperties: ESObject = {
statusBarContentColor: '#000000',
navigationBarContentColor: '#000000'
}
try {
window.getLastWindow(getContext(), (err: BusinessError, data) => {
const errCode: number = err.code;
if (errCode) {
return;
}
let windowClass: window.Window | undefined = data;
windowClass.setWindowSystemBarProperties(systemBarProperties, (err) => {
if (err.code) {
console.error('Failed to set the system bar properties. Cause: ' + JSON.stringify(err));
return;
}
console.info('Succeeded in setting the system bar properties.');
});
});
} catch (exception) {
}
}
应用不设置全屏使用expandSafeArea
全栈不设置全屏的情况下,使用expandSafeArea属性扩展安全区域属性,可以扩展到状态栏、扩展到导航栏。
Column()
.height('100%').width('100%')
.backgroundImage($r('app.media.bg')).backgroundImageSize(ImageSize.Cover)
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
组件设置expandSafeArea之后生效的条件为:
1.type为SafeAreaType.KEYBOARD时默认生效,组件不避让键盘。
2.设置其他type,组件的边界与安全区域重合时组件能够延伸到安全区域下。例如:设备顶部状态栏高度100,那么组件在屏幕中的绝对位置需要为0 <= y <= 100。
组件延伸到安全区域下,在安全区域处的事件,如点击事件等可能会被系统拦截,优先给状态栏等系统组件响应。
滚动类容器内的组件不建议设置expandSafeArea属性,如果设置,需要按照组件嵌套关系,将当前节点到滚动类祖先容器间所有直接节点设置expandSafeArea属性,否则expandSafeArea属性在滚动后可能会失效