HarmonyOs鸿蒙开发实战(17)=＞沉浸式效果第二种方案一组件安全区方案

 1.沉浸式效果的目的

• 开发应用沉浸式效果主要指通过调整状态栏、应用界面和导航条的显示效果来减少状态栏导航条等系统界面的突兀感，从而使用户获得最佳的UI体验。

2.组件安全区方案介绍

• 应用在默认情况下窗口背景绘制范围是全屏，但UI元素被限制在安全区内（自动排除状态栏和导航条）进行布局，来避免界面元素被状态栏和导航条遮盖，效果如下。
• 应用未使用setWindowLayoutFullScreen()接口设置窗口全屏布局时，默认使用组件安全区布局。
• 布局系统保持安全区内布局，然后通过接口延伸expandSafeArea绘制内容（如背景色，背景图）到状态栏和导航条区域实现沉浸式效果。

3.具体实现方式1=>状态栏和导航条颜色相同场景，可以通过设置窗口的背景色来实现沉浸式效果。窗口背景色可通过setWindowBackgroundColor()进行设置。效果及代码如下：

示例代码：

步骤1=>

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';

export default class EntryAbility extends UIAbility {
  // ...

  onWindowStageCreate(windowStage: window.WindowStage): void {
    windowStage.loadContent('pages/Index', (err, data) => {
      if (err.code) {
        return;
      }

      // 设置全窗颜色和应用元素颜色一致
      windowStage.getMainWindowSync().setWindowBackgroundColor('#008000');
    });
  }
}

步骤二=> 设置安全区组件背景色和状态栏导航栏颜色一致

 4.实现方式2 => 状态栏和导航条颜色不同时，可以使用expandSafeArea属性扩展安全区域属性进行调整,原理如下：

• 布局阶段按照安全区范围大小进行UI元素布局。
• 布局完成后查看设置了expandSafeArea的组件边界（不包括margin）是否和安全区边界相交。
• 如果设置了expandSafeArea的组件和安全区边界相交，根据expandSafeArea传递的属性则进一步扩大组件绘制区域大小覆盖状态栏、导航条这些非安全区域。
• 上述过程仅改变组件自身绘制大小，不进行二次布局，不影响子节点和兄弟节点的大小和位置。
• 子节点可以单独设置该属性，只需要自身边界和安全区域重合就可以延伸自身大小至非安全区域内，需要确保父组件未设置clip等裁切属性。
• 配置expandSafeArea属性组件进行绘制扩展时，需要关注组件不能配置固定宽高尺寸，百分比除外。

        4.1沉浸式效果如下=>

        4.2.沉浸式具体代码如下=>

5.大功告成