HarmonyOS 鸿蒙Next网页安全区域计算与规避

【解决方案】

根据设计要素要求，可以通过如下五种方式实现应用沉浸式效果：

• 方案一：全屏显示，不隐藏避让区：调整布局系统为全屏布局，界面元素延伸到状态栏和导航条区域实现沉浸式效果。通过接口查询状态栏和导航条区域进行可交互元素避让处理，并设置状态栏或导航条的颜色等属性与界面元素匹配。
• 方案二：全屏显示，隐藏避让区：通过对应接口设置全屏布局即可（隐藏避让区场景适用于游戏、电影等应用场景，可以通过从底部上滑唤出导航条）。

注意：全屏显示设置针对的是窗口，如果希望实现单页面的全屏显示，可以在对应页面中添加如下代码：

@Entry
@Component
struct Index {
  onPageShow(): void {
    window.getLastWindow(getContext(this), (err, win) => {
      win.setWindowLayoutFullScreen(true)
    })
  }

  onPageHide(): void {
    window.getLastWindow(getContext(this), (err, win) => {
      win.setWindowLayoutFullScreen(false)
    })
  }

  build() {
  // ...
  }
}

不设置全屏显示下的方案：

• 方案三：通过setWindowBackgroundColor设置窗口背景色风格与应用界面一致： EntryAbility中的onWindowStageCreate方法示例代码：

export default class EntryAbility extends UIAbility {
  onWindowStageCreate(windowStage: window.WindowStage): void {
    console.info('Ability onWindowStageCreate');

    windowStage.loadContent('pages/Index', (err) => {
      if (err.code) {
        console.error(`Failed to load the content. Cause: ${err}`);
        return;
      }

      // 设置全窗颜色和应用元素颜色一致
      windowStage.getMainWindowSync().setWindowBackgroundColor('#317AF7');
      console.info('Succeeded in loading the content.');
    });
  }
}

• 方案四：通过expandSafeArea属性扩展安全区域属性进行调整：示例参考扩展安全区域属性原理。
• 方案五：通过setWindowSystemBarProperties设置避让区域背景颜色与字体颜色统一风格： 以改变状态栏背景颜色和字体颜色为例，在方案三代码中添加如下代码：

@Entry
@Component
struct Index {
  aboutToAppear(): void {
    let windowClass: window.Window | undefined = undefined;
    window.getLastWindow(getContext(), (err: BusinessError, data) => {
      windowClass = data
      let SystemBarProperties: window.SystemBarProperties = {
        statusBarColor: '#F08080',
        statusBarContentColor: '#008000'
      };
      try {
        let promise = windowClass.setWindowSystemBarProperties(SystemBarProperties);
        promise.then(() => {
          console.info('Succeeded in setting the system bar properties.');
        }).catch((err: BusinessError) => {
          console.error(`Failed to set the system bar properties. Cause code: ${err.code}, message: ${err.message}`);
        });
      } catch (exception) {
        console.error(`Failed to set the system bar properties. Cause code: ${exception.code}, message: ${exception.message}`);
      }
    })
  }

  build() {
  // ...
  }
}