在移动端开发中,安全区域是指页面的显示区域,默认不与系统设置的非安全区域比如状态栏、导航栏区域重叠,默认情况下开发者开发的界面都被布局在安全区域内。例如下图中,图片被布局在顶部状态栏和底部导航栏之间:
如果我们想要实现一个微信朋友圈沉浸式的效果,如下图:
这个效果怎么实现呢?
实现方案有三种,分别是:
- setWindowLayoutFullScreen方法实现沉浸式
- 设置背景色统一实现沉浸式
- expandSafeArea属性实现沉浸式
setWindowLayoutFullScreen方法实现沉浸式
鸿蒙提供了setWindowLayoutFullScreen方法来设置全屏。参数为true时表示全屏显示,false表示非全屏显示
- ability中设置setWindowLayoutFullScreen
在ability中通过getMainWindow可以获取主窗体,然后通过得到的window对象的setWindowLayoutFullScreen属性设置窗口的布局是否为全屏显示状态。如下代码:
onWindowStageCreate(windowStage: window.WindowStage) {
// Main window is created, set main page for this ability
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
// 设置全屏显示
windowStage.getMainWindow().then(window => {
window.setWindowLayoutFullScreen(true)
})
windowStage.loadContent('pages/Index', (err, data) => {
if (err.code) {
hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
return;
}
hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
});
}
效果如下:
但是这种方式会给所有的页面都设置了沉浸式,如果某些页面不需要设置沉浸式,还需要在页面中通过获取window来关闭:
aboutToAppear(): void {
window.getLastWindow(getContext())
.then(win => {
win.setWindowLayoutFullScreen(false)
})
}
所以不推荐使用这种方式来设置沉浸式。
- 页面中设置setWindowLayoutFullScreen
我们只需要某个页面全屏显示,这时候我们可以单独给这个页面设置setWindowLayoutFullScreen属性:
aboutToAppear(): void {
window.getLastWindow(getContext())
.then(win => {
win.setWindowLayoutFullScreen(true)
})
}
设置背景色统一实现沉浸式
如果我们只需要背景统一,实现状态栏-导航栏-主内容区的颜色统一,可以通过设置整体窗口的背景色来实现视觉沉浸式。
onWindowStageCreate(windowStage: window.WindowStage) {
// Main window is created, set main page for this ability
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
windowStage.loadContent('pages/Index', (err, data) => {
if (err.code) {
hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
return;
}
// 设置背景色实现沉浸式
windowStage.getMainWindowSync().setWindowBackgroundColor('#9F6BF5')
hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
});
}
注意:需要在loadContent完成之后,再设置背景色
expandSafeArea 属性实现沉浸式
相对于通过setWindowLayoutFullScreen设置所有页面进行全局的设置,expandSafeArea是个按需的方式,哪个页面需要使用沉浸式,直接自己设置即可。
expandSafeArea属性是next版本新增的属性,支持组件扩展其安全区域,哪个页面需要使用沉浸式,直接自己设置即可。
expandSafeArea属性支持两个参数,第一个参数用来配置扩展安全区域的类型,默认值如下:
[SafeAreaType.SYSTEM, SafeAreaType.CUTOUT, SafeAreaType.KEYBOARD]
第二个参数用来配置扩展安全区域的方向,默认值如下:
[SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM, SafeAreaEdge.START, SafeAreaEdge.END]
在页面中使用组件的expandSafeArea属性实现沉浸式代码如下:
Image($rawfile('ce2722d49db9ff43b5eef24137d34aa9.jpg'))
.width('100%')
.height('50%')
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
————————————————
原文链接:https://blog.csdn.net/shudaoshanQAQ/article/details/137841682