【鸿蒙应用ArkTS开发系列】- 沉浸式状态栏实现

已于 2023-12-26 10:19:12 修改
阅读量3k 收藏 36
点赞数 32
分类专栏： Harmony 文章标签： harmonyos 华为 ArkTS ArkUI 鸿蒙开发
于 2023-12-25 19:40:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q919233914/article/details/135200420
版权

文章目录

一、前言

在应用开发中，页面跟状态栏的默认显示效果一般是如下：
在这里插入图片描述
但是产品UI设计的时候，一般是会设计一个沉浸式状态的页面效果，如下：
在这里插入图片描述
那在鸿蒙应用开发中，应该怎么实现这个沉浸式状态栏的效果呢？下面我们来创建一个Demo工程进行讲解。

二、封装沉浸式状态栏管理类

1、创建Demo工程

首先我们创建一个Demo工程，在ets目录下创建common文件夹。
在这里插入图片描述

2、封装状态栏管理类

我们在common目录中创建StatusBarManager.ts文件，完整的代码如下：

import window from '@ohos.window';
import HashMap from '@ohos.util.HashMap';
import { Log } from './Log';

/**
 * 状态栏管理器
 */
export class StatusBarManager {
  private readonly TAG = 'StatusBarManager';
  private readonly CONFIG_SYSTEM_BAR_HEIGHT = 'systemBarHeight';
  private static mInstance: StatusBarManager;
  private mWindowStage: window.WindowStage;

  private mConfig = new HashMap<string, any>();

  private constructor() {
  }

  public static get(): StatusBarManager {
    if (!this.mInstance) {
      this.mInstance = new StatusBarManager();
    }
    return this.mInstance;
  }

  /**
   * 存储windowStage实例
   * @param windowStage
   */
  public storeWindowStage(windowStage: window.WindowStage) {
    this.mWindowStage = windowStage;
  }

  /**
   * 获取windowStage实例
   * @returns
   */
  public getWindowStage(): window.WindowStage {
    return this.mWindowStage;
  }

  /**
   * 设置沉浸式状态栏
   * @param windowStage
   * @returns
   */
  public setImmersiveStatusBar(windowStage: window.WindowStage): Promise<void> {

    let resolveFn, rejectFn;
    let promise = new Promise<void>((resolve, reject) => {
      resolveFn = resolve;
      rejectFn = reject;
    });

    // 1.获取应用主窗口。
    try {
      let windowClass = windowStage.getMainWindowSync();
      Log.info(this.TAG, 'Succeeded in obtaining the main window. Data: ' + JSON.stringify(windowClass));

      // 2.实现沉浸式效果：设置窗口可以全屏绘制。
      // 将UI内容顶入状态栏下方
      windowClass.setWindowLayoutFullScreen(true)
        .then(() => {
          //3、设置状态栏 可见
          windowClass.setWindowSystemBarEnable(['status']).then(() => {
            //4、设置状态栏透明背景
            const systemBarProperties: window.SystemBarProperties = {
              statusBarColor: '#00000000'
            };
            //设置窗口内导航栏、状态栏的属性
            windowClass.setWindowSystemBarProperties(systemBarProperties)
              .then(() => {
                Log.info(this.TAG, 'Succeeded in setting the system bar properties.');
              }).catch((err) => {
              Log.error(this.TAG, 'Failed to set the system bar properties. Cause: ' + JSON.stringify(err));
            });
          })

          //5、存储状态栏高度
          this.storeStatusBarHeight(windowClass);

          resolveFn();
        });

    } catch (err) {
      Log.error(this.TAG, 'Failed to obtain the main window. Cause: ' + JSON.stringify(err));
      rejectFn();
    }

    return promise;

  }

  /**
   * 关闭沉浸式状态栏
   * @param windowStage
   * @returns
   */
  public hideImmersiveStatusBar(windowStage: window.WindowStage): Promise<void> {

    let resolveFn, rejectFn;
    let promise = new Promise<void>((resolve, reject) => {
      resolveFn = resolve;
      rejectFn = reject;
    });
    // 1.获取应用主窗口。
    try {
      let windowClass = windowStage.getMainWindowSync();
      Log.info(this.TAG, 'Succeeded in obtaining the main window. Data: ' + JSON.stringify(windowClass));

      windowClass.setWindowLayoutFullScreen(false)
        .then(() => {
          //存储状态栏高度
          this.mConfig.set(this.CONFIG_SYSTEM_BAR_HEIGHT, 0);
          resolveFn();
        });

    } catch (err) {
      Log.error(this.TAG, 'Failed to obtain the main window. Cause: ' + JSON.stringify(err));
      rejectFn(err);
    }
    return promise;

  }


  /**
   * 获取状态栏高度进行保存
   * @param windowClass
   * @returns
   */
  private storeStatusBarHeight(windowClass: window.Window) {

    try {
      const avoidArea = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
      // 保存高度信息
      this.mConfig.set(this.CONFIG_SYSTEM_BAR_HEIGHT, avoidArea.topRect.height);
      Log.info(this.TAG, 'Succeeded in obtaining the area. Data:' + JSON.stringify(avoidArea));

    } catch (err) {
      Log.error(this.TAG, 'Failed to obtain the area. Cause:' + JSON.stringify(err));
    }
  }

  /**
   * 未开启沉浸式状态栏，偏移量为0，开启， 偏移量为状态栏高度
   * @returns
   */
  public getSystemBarOffset(): number {
    let height = 0;
    if (this.mConfig.hasKey(this.CONFIG_SYSTEM_BAR_HEIGHT)) {
      height = this.mConfig.get(this.CONFIG_SYSTEM_BAR_HEIGHT) as number;
    }
    return height;
  }

  /**
   * 是否开启沉浸式状态栏
   * @returns
   */
  public isOpenImmersiveStatusBar(): boolean {
    return this.getSystemBarOffset() > 0;
  }
}

StatusBarManager 管理类主要提供以下常用的方法：

  • get- 获取管理类单例实例
  • storeWindowStage- 存储windowStage实例
    该方法在UIAbility中进行调用。
  • getWindowStage- 获取windowStage实例
  • setImmersiveStatusBar- 设置沉浸式状态栏
  • hideImmersiveStatusBar- 关闭沉浸式状态栏
  • storeStatusBarHeight- （内部私有方法）获取状态栏高度进行保存
  • getSystemBarOffset- 获取状态栏高度（沉浸式状态栏下需要调整的标题偏移量）
  • isOpenImmersiveStatusBar- 是否开启沉浸式状态栏

下面我们主要讲解下setImmersiveStatusBar方法，设置沉浸式状态栏，这个过程主要分为五个步骤：

1、获取应用主窗口

let windowClass = windowStage.getMainWindowSync();

我们通过传入的windowStage，同步获取一个主窗口实例。

2、设置窗口可以全屏绘制

windowClass.setWindowLayoutFullScreen(true)

我们将窗口设置为全屏模式。

3、设置状态栏可见

windowClass.setWindowSystemBarEnable(['status'])

在设置全屏后，状态栏不可见，我们需要的不是全屏效果，而是状态栏沉浸式效果，因此需要将状态栏设置为可见。
这里入参是一个数组，可以设置状态栏、也可以设置底部导航栏。

4、设置窗口内状态栏背景为透明

const systemBarProperties: window.SystemBarProperties = {
              statusBarColor: '#00000000'
};
windowClass.setWindowSystemBarProperties(systemBarProperties)
              .then(() => {
                Log.info(this.TAG, 'Succeeded in setting the system bar properties.');
              }).catch((err) => {
              Log.error(this.TAG, 'Failed to set the system bar properties. Cause: ' + JSON.stringify(err));
            });

状态栏设置为显示状态后，我们给状态栏的背景色设置为透明，这里才能达到沉浸式的效果。

5、存储状态栏高度

const avoidArea = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
// 保存高度信息
this.mConfig.set(this.CONFIG_SYSTEM_BAR_HEIGHT, avoidArea.topRect.height);

我们通过上述代码可以获取系统状态栏的高度，并将其保存起来，后续页面通过该高度来判断是否是开启了沉浸式状态栏。

这样我们的状态栏管理类就封装完毕，下面我们来写下页面UI实现沉浸式页面状态栏效果。

三、编写页面实现沉浸式状态栏效果

1、存储windowStage实例

具体如下：

  onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

    StatusBarManager.get().storeWindowStage(windowStage);

    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) ?? '');
    });
  }

在EntryAbility.ts 文件 onWindowStageCreate方法中添加如下代码：

StatusBarManager.get().storeWindowStage(windowStage);

我们这个Demo效果，是在单个Page中开启关闭沉浸式效果，因此我们需要在UIAbility中存储windowStage实例。

实际应用使用中，如果需要所有Page都开启沉浸式状态效果，则可以将上述代码调整为

StatusBarManager.get().setImmersiveStatusBar(windowStage);

2、Page页面中实现沉浸式开启关闭功能

2.1、开启沉浸式状态栏

我们拷贝如下代码到Index.ets 文件中：

import { StatusBarManager } from '../common/StatusBarManager';

@Entry
@Component
struct Index {
  @State showImmersiveStatusBar: boolean = false;

  build() {
    Column() {

      Column() {
        Column() {
          Text('这是标题')
            .fontSize(20)
            .fontColor(Color.White)
        }
        .height(50)
        .justifyContent(FlexAlign.Center)
      }
      .width('100%')
      .backgroundColor('#ff007dfe')

      Column() {
        Text('点击开启沉浸式状态栏')
          .fontSize(16)

        Button(this.showImmersiveStatusBar ? '关闭' : '开启')
          .fontSize(16)
          .margin({ top: 20 })
          .padding({ left: 50, right: 50 })
          .onClick(() => {

            if (this.showImmersiveStatusBar) {
              this.close();
            } else {
              this.open();
            }
            this.showImmersiveStatusBar = !this.showImmersiveStatusBar;
          })
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
    }
    .height('100%')
  }

  private open() {
    let windowStage = StatusBarManager.get().getWindowStage();
    if (windowStage) {
      StatusBarManager.get().setImmersiveStatusBar(windowStage);
    }
  }

  private close() {
    let windowStage = StatusBarManager.get().getWindowStage();
    if (windowStage) {
      StatusBarManager.get().hideImmersiveStatusBar(windowStage);
    }
  }
}

我们运行下代码将应用装到手机上看看效果**
（真机配置签名方式前面文章有示例讲解，不懂的同学可以翻下我之前的文章看下）**
具体效果如下：
在这里插入图片描述
我们点击下开启看下效果，
在这里插入图片描述
咋看以下好像没什么问题，但是如果手机是居中挖孔屏，那我们的标题就会显示在摄像头位置上，影响页面布局的正常显示，那这个问题应该怎么处理呢。
大家还记得我们上面封装状态栏管理器的时候，对外提供了一个获取状态栏高度偏移量的方法吗，这个时候我们就需要用到它了。

2.2、设置标题栏偏移量

在这里插入图片描述

我们在布局中，对标题栏设置一个上方的Padding，数值为状态栏高度即可，那这个偏移量怎么获取呢，在什么时候获取呢？我们接着往下看。

 private open() {
    let windowStage = StatusBarManager.get().getWindowStage();
    if (windowStage) {
      StatusBarManager.get().setImmersiveStatusBar(windowStage)
        .then(() => {
          this.titleBarPadding= StatusBarManager.get().getSystemBarOffset();
        });
    }
  }

我们封装setImmersiveStatusBar的时候，是在执行沉浸式状态栏完成后，使用Promise方式返回了结果，表明沉浸式状态栏开启完成，我们只需要使用then关键字，在代码块中调用 getSystemBarOffset获取高度后设置给titleBarPadding即可。
下面贴下修改后的完整代码：

import { StatusBarManager } from '../common/StatusBarManager';

@Entry
@Component
struct Index {
  @State showImmersiveStatusBar: boolean = false;
  @State titleBarPadding: number = 0;

  build() {
    Column() {

      Column() {
        Column() {
          Text('这是标题')
            .fontSize(20)
            .fontColor(Color.White)
        }
        .height(50)
        .justifyContent(FlexAlign.Center)
      }
      .padding({ top: `${this.titleBarPadding}px` })
      .width('100%')
      .backgroundColor('#ff007dfe')

      Column() {
        Text('点击开启沉浸式状态栏')
          .fontSize(16)

        Button(this.showImmersiveStatusBar ? '关闭' : '开启')
          .fontSize(16)
          .margin({ top: 20 })
          .padding({ left: 50, right: 50 })
          .onClick(() => {

            if (this.showImmersiveStatusBar) {
              this.close();
            } else {
              this.open();
            }
            this.showImmersiveStatusBar = !this.showImmersiveStatusBar;
          })
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
    }
    .height('100%')
  }

  private open() {
    let windowStage = StatusBarManager.get().getWindowStage();
    if (windowStage) {
      StatusBarManager.get().setImmersiveStatusBar(windowStage)
        .then(() => {
          this.titleBarPadding = StatusBarManager.get().getSystemBarOffset();
        });
    }
  }

  private close() {
    let windowStage = StatusBarManager.get().getWindowStage();
    if (windowStage) {
      StatusBarManager.get().hideImmersiveStatusBar(windowStage).then(() => {
        this.titleBarPadding = 0;
      })
    }
  }
}

下面我们重新运行看下效果：
在这里插入图片描述
看起来效果还可以，开启沉浸式状态栏后，页面的UI展示效果明显提到了一个档次哈哈。

本文到此完毕，如果有什么疑问，欢迎评论区沟通探讨。谢谢大家的阅读！

小枫_S
关注
  • 32
    点赞
  • 踩
  • 36
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
专栏目录
鸿蒙实现沉浸式全屏模式
龚礼鹏的博客
03-26 243
如上是鸿蒙开发中实现沉浸式的两种方式，当然也可以分别隐藏导航栏或者状态栏。
鸿蒙Arkts ：简易登陆界面.zip
02-07
华为 鸿蒙系统 开发
HarmonyOS 鸿蒙应用开发 例1-任务进度管理程序
01-27
任务进度轻松掌控：ArkUI框架实战详解任务管理应用开发 内容简介：想要高效管理任务，追踪进度？不妨借助ArkUI框架打造一个任务管理应用！本文将深入解析如何使用ArkUI的声明式UI设计，在应用中新增任务、完成任务，...
鸿蒙OS ArkUI 沉浸式导航栏动态获取高度 -- 小白篇
qq_46448369的博客
01-12 1045
鸿蒙OS ArkUI 沉浸式导航栏动态获取高度
【收录-鸿蒙开发】设置全屏（隐藏状态栏、导航栏）
在下GuiChun
11-02 1020
https://blog.csdn.net/m0_49900023/article/details/119712550
【HarmonyOS】API9沉浸式状态栏
Mayism123的博客
08-15 924
对于沉浸式状态栏，在之前API8 FA模型开发中可以通过在config.json配置主题的方式实现应用的沉浸式体验，在最新的API9 Stage模型中系统提供了沉浸式窗口的示例（通过调用setWindowSystemBarEnable接口，设置导航栏、状态栏不显示，从而达到沉浸式效果。如果要显示完全的沉浸式效果，可以将当前应用窗口设置为全屏样式实现。
修改状态栏的颜色
tzztzz01的博客
01-04 173
修改状态栏的颜色
鸿蒙设置沉浸式状态栏、全屏、获取导航栏高度
m0_38047544的博客
02-02 1691
鸿蒙设置沉浸式状态栏、全屏、获取导航栏高度
HarmonyOS ArkTS应用沉浸式状态栏
weixin_43807186的博客
01-05 487
【鸿蒙应用ArkTS开发系列】- 沉浸式状态栏实现
harmonyOS开发技巧（二）——沉浸式以及状态栏高
斗师——Ace
12-09 1295
2. 获取状态栏的高：win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)以及win.on('avoidAreaChange', (data) => {})。1. 设置沉浸式：win.setWindowLayoutFullScreen(true);
【无标题】
csdndevpress0028的博客
06-09 385
2环境搭建3代码结构解读4登录界面实现沉浸式5创建验证码校验子窗口6验证成功跳转到首页7总结介绍本篇Codelab基于窗口能力，实现验证码登录的场景，主要完成以下功能：登录页面主窗口实现沉浸式。输入用户名和密码后，拉起验证码校验子窗口。验证码校验成功后，主窗口跳转到应用首页。
【鸿蒙应用ArkTS开发系列】- 导航栏Tab组件使用讲解
枫的专栏
05-06 6464
Tabs是一个通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图，它仅可包含子组件TabContent，同时搭配 TabsController使用。TabsController 是Tabs组件的控制器，用于控制Tabs组件进行页签切换。不支持一个TabsController控制多个Tabs组件。具体可查看官网介绍，这里就不多描述。//文本 icon_normal : Resource;// 默认图标 icon_selected : Resource;// 选中图标 }
HarmonyOS应用开发框架HarmonyOS应用开发-实现底部导航栏功能
10-29
HarmonyOS开发的一款基础应用 HarmonyOS应用开发-实现底部导航栏功能
HarmonyOS移动应用开发（ArkTS版）课件PPT
11-14
HarmonyOS移动应用开发（ArkTS版） 刘安战、余雨萍、陈争艳 清华大学出版社 课件PDF。共十三章，每章1个PPT
本示例代码用于-HarmonyOS-ArkTS-UIAbility-【坚果派-红目香薰】文章的对应示例
01-24
本示例代码用于——HarmonyOS-ArkTS-UIAbility——【坚果派-红目香薰】文章的对应示例。 示例内容为页面跳转与传递参数以及返回上一层页面操作的代码。
鸿蒙 harmonyos 线程 并发 总结 async promise Taskpool woker（二）多线程并发 Taskpool
最新发布
qq_28641891的博客
04-22 803
鸿蒙 harmonyos 并发 taskpool
鸿蒙OpenHarmony【轻量系统编译】 （基于Hi3861开发板）
m0_62167422的博客
04-22 1188
而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点如果。
HarmonyOS开发环境搭建 移动开发 鸿蒙开发 ArkTS
ooo
04-21 1191
HarmonyOS Dev环境搭建， HelloWorld， 组件（ Row Column List ListItem TabContent Swiper SwiperController Grid GridItem Text TextInput Button Image），后端接口测试
HarmonyOS Next 视频弹幕功能
maniuT的博客
04-17 1258
本示例介绍如何使用和开发支持视频弹幕的播放器。可以自定义弹幕样式、占据屏幕宽度，发送弹幕，开关弹幕视图。
harmonyos移动应用开发 arkts版 电子书
01-29
HarmonyOS移动应用开发arkts版电子书是一本关于如何使用HarmonyOS开发移动应用的实用指南。这本电子书的目的是帮助开发者了解HarmonyOS移动应用开发的基本概念和技术，以及如何使用arkts工具包来构建高性能、可靠的应用程序。 这本电子书首先介绍了HarmonyOS的基本概念和架构，包括分布式技术、资源管理和安全性等方面。然后，它详细介绍了arkts工具包的使用方法，包括如何设置开发环境、创建应用程序和调试代码等。此外，该电子书还提供了大量的示例代码和实战案例，供读者参考和学习。 在这本电子书中，读者将学习如何开发HarmonyOS移动应用的各个方面，包括界面设计、数据存储、网络通信和用户体验等。它不仅涵盖了基础知识，还介绍了一些高级主题，如应用程序优化和性能调优。读者可以通过阅读这本电子书，系统地学习和掌握HarmonyOS移动应用开发的技能。 总而言之，HarmonyOS移动应用开发arkts版电子书是一本详细且实用的指南，适用于那些对HarmonyOS移动应用开发感兴趣的开发者。它提供了全面的教程和实战案例，帮助读者快速入门和掌握HarmonyOS移动应用开发的技术。希望通过这本电子书，更多的开发者能够利用HarmonyOS的优势，开发出更好的移动应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值