鸿蒙实战开发：沉浸式效果

蜀道山QAQ

已于 2024-04-16 21:44:04 修改

阅读量2.6k

点赞数 27

分类专栏：鸿蒙文章标签： harmonyos 华为鸿蒙前端鸿蒙系统 android

于 2024-04-16 21:43:41 首次发布

本文链接：https://blog.csdn.net/shudaoshanQAQ/article/details/137841682

版权

鸿蒙专栏收录该内容

626 篇文章

订阅专栏

文章介绍了在移动端开发中如何通过setWindowLayoutFullScreen、expandSafeArea属性以及设置背景色实现沉浸式效果，同时提到了鸿蒙系统的相关开发技术，如Stage模型、组件扩展和多媒体技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

这个效果怎么实现呢？

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

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

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

HarmonOS基础技能

HarmonOS就业必备技能
HarmonOS多媒体技术

鸿蒙NaPi组件进阶

HarmonOS高级技能

初识HarmonOS内核
实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料