鸿蒙开发之沉浸式效果

最新推荐文章于 2025-04-17 15:19:23 发布

stablediffusion知识库

最新推荐文章于 2025-04-17 15:19:23 发布

阅读量1.8k

点赞数 14

文章标签： harmonyos

本文链接：https://blog.youkuaiyun.com/yihanss/article/details/137345876

版权

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

例如下图中，图片被布局在顶部状态栏和底部导航栏之间：

在这里插入图片描述

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

在这里插入图片描述

这个效果怎么实现呢？

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

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])

怎样学习鸿蒙？

首先必学的是开发语言 ArkTS，这是重中之重，然后就是ArkUI声明式UI开发、Stage模型、网络/数据库管理、分布式应用开发、进程间通信与线程间通信技术、OpenHarmony多媒体技术……。中间还有许多的知识点，都整理成思维导图来分享给大家~
在这里插入图片描述
此外，小编精心准备了一份联合鸿蒙官方发布笔记整理收纳的《鸿蒙开发学习笔记》，内容包含ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。