鸿蒙实战开发：全屏显示的沉浸式效果

在移动端开发中，安全区域是指页面的显示区域，默认不与系统设置的非安全区域比如状态栏、导航栏区域重叠，默认情况下开发者开发的界面都被布局在安全区域内。例如下图中，图片被布局在顶部状态栏和底部导航栏之间：

如果我们想要实现一个微信朋友圈沉浸式的效果，如下图：

这个效果怎么实现呢？

实现方案有三种，分别是：

• 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