OpenHarmony实战开发-如何开发沉浸式界面。

最新推荐文章于 2025-03-09 14:36:24 发布

码牛程序猿

最新推荐文章于 2025-03-09 14:36:24 发布

阅读量1k

点赞数 28

分类专栏：鸿蒙工程师 HarmonyOS 鸿蒙文章标签： OpenHarmony 鸿蒙开发鸿蒙系统 harmonyos 鸿蒙应用开发 HarmonyOS 鸿蒙

本文链接：https://blog.csdn.net/2401_82546228/article/details/139183425

版权

场景说明

沉浸式界面通常是指全屏显示，即当前画面占据整个屏幕。画面放大的同时，让用户摆脱无关信息的干扰，带给用户沉浸式的体验。常见的场景有：视频播放、游戏等。本例即为大家介绍如何开发沉浸式界面。

说明：

当前沉浸式界面开发仅支持window级别的配置，暂不支持Page级别的配置。开发者若有Page级别切换的需要，可以在页面的生命周期开始，例如onPageShow中设置沉浸模式，然后在页面退出，例如onPageHide中恢复默认设置来实现。

效果呈现

本例中的沉浸式界面有三种实现方式，对应效果如下：

方案一：颜色背景铺满方案二：图片背景铺满方案三：背景铺满的同时、状态栏不可见
fullcolor fullbackground fullscreen

运行环境

本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：

IDE: DevEco Studio 3.1 Beta2
SDK: Ohos_sdk_public 3.2.11.9(APIVersion 9 Release)

实现思路

如果一个应用想要获得沉浸式的体验，开发者可以通过以下三种方式进行实现：

颜色背景通铺：使应用页面的背景色和状态栏、导航栏的背景色一致。可通过setWindowSystemBarProperties进行设置。
图片背景通铺：将状态栏、导航栏的背景色设置为透明以便呈现应用界面的背景，同时通过windowClass.on接口获取到状态栏、导航栏的区域信息，进行规避处理，以免状态栏、导航栏的内容遮挡住应用内容。
隐藏导航栏和状态栏：使用setWindowSystemBarEnable设置导航栏和状态栏为隐藏状态。

说明：

沉浸式的设置最好放在ability的onWindowStageCreate的生命周期里，此时刚好可以获取窗口的信息，放在页面生命周期里会出现窗口大小不一致，影响体验。

下文将分别介绍这三种方案的具体开发步骤。

开发步骤

颜色背景通铺

此方案通过调用setWindowSystemBarProperties接口将状态栏和导航栏的背景色设置为跟应用窗口相同的颜色，以达到界面全屏的效果。

具体代码如下：

import window from '@ohos.window';
import common from '@ohos.app.ability.common';
 
@Entry
@Component
struct Type2 {
   
  @State message: string = 'Hello World'
  // 获取UIAbility上下文
  context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext
  async setSystemBar() {
   
    // 获取当前应用窗口
    let windowClass:window.Window = await window.getLastWindow(context)
    // 将状态栏和导航栏的背景色设置为跟应用窗口相同的颜色
    await windowClass.setWindowSystemBarProperties({
   
      navigationBarColor: "#00FF00",
      statusBarColor: "#00FF00",
      navigationBarContentColor: "#00FF00",
      statusBarContentColor: "#00FF00"
    })
  }
 
  aboutToAppear() {
   
    this.setSystemBar()
  }
 
  build() {
   
    Row() {
   
      Column() {
   
        Text(this.message)
          .fontSize

最低0.47元/天解锁文章