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

news2024/9/24 13:17:51

文章目录

  • 一、前言
  • 二、封装沉浸式状态栏管理类
    • 1、创建Demo工程
    • 2、封装状态栏管理类
  • 三、编写页面实现沉浸式状态栏效果
    • 1、存储windowStage实例
    • 2、Page页面中实现沉浸式开启关闭功能
      • 2.1、开启沉浸式状态栏
      • 2.2、设置标题栏偏移量

一、前言

在应用开发中，页面跟状态栏的默认显示效果一般是如下：
在这里插入图片描述
但是产品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展示效果明显提到了一个档次哈哈。

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1335054.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

算法练习Day20 （Leetcode/Python-回溯算法）

算法练习Day20 （Leetcode/Python-回溯算法）

虽然看似进入了一个新章节&#xff0c;但其实还是前几天二叉树章节的延续。。 回溯算法 &#xff08;以下内容摘抄自代码随想录&#xff09;&#xff1a; 回溯法解决的问题都可以抽象为树形结构&#xff0c;是的&#xff0c;我指的是所有回溯法的问题都可以抽象为树形结构&…
阅读更多...
etcd-workbench一款免费好用的ETCD客户端，支持SSHTunnel、版本对比等功能

etcd-workbench一款免费好用的ETCD客户端，支持SSHTunnel、版本对比等功能

介绍 今天推荐一款完全免费的ETCD客户端&#xff0c;可以私有化部署: etcd-workbench 开源地址&#xff1a;https://github.com/tzfun/etcd-workbench Gitee地址&#xff1a;https://gitee.com/tzfun/etcd-workbench 下载 本地运行 从 官方Release 下载最新版的 jar 包&am…
阅读更多...
详谈 springboot整合shiro

详谈 springboot整合shiro

背景&#xff1a; 本章将进一步的落地实践学习&#xff0c;在springboot中如何去整合shrio&#xff0c;整个过程步骤有个清晰的了解。 利用Shiro进行登录认证主要步骤&#xff1a; 1. 添加依赖&#xff1a;首先&#xff0c;在pom.xml文件中添加Spring Boot和Shiro的相关依赖…
阅读更多...
Unprocessing Images for Learned Raw Denoising

Unprocessing Images for Learned Raw Denoising

原文 RWA Image Dataset&#xff1a;the Darmstadt Noise Dataset Abstract 1、Introduction 1、传统图像去噪方法&#xff1a;分析图像属性、对噪声建模&#xff08;传统方法好像总是这样&#xff0c;建立模型然后用数学方法贴近模型&#xff09; TBD&#xff1a;找传统的…
阅读更多...
开源自托管导航页配置服务Dashy本地搭建结合内网穿透远程访问

开源自托管导航页配置服务Dashy本地搭建结合内网穿透远程访问

开源自托管导航页配置服务Dashy本地搭建结合内网穿透远程访问 简介1. 安装Dashy2. 安装cpolar3.配置公网访问地址4. 固定域名访问 简介 Dashy 是一个开源的自托管的导航页配置服务&#xff0c;具有易于使用的可视化编辑器、状态检查、小工具和主题等功能。你可以将自己常用的一…
阅读更多...
网络编程--socket编程

网络编程--socket编程

这里写目录标题 套接字概念通信原理总结 预备知识网络字节序简介字节转换函数 IP地址转换函数为什么单独列出函数原型sockaddr结构体 一级目录二级目录二级目录二级目录 一级目录二级目录二级目录二级目录 套接字 概念 Socket本身有插座的意思&#xff0c;但他是进程之间网络通…
阅读更多...
如何分析 JVM 内存瓶颈浅谈

如何分析 JVM 内存瓶颈浅谈

背景&#xff1a; 当操作系统内存出现瓶颈时&#xff0c;我们便会重点排查那个应用占用内存过大。对于更深一步分析内存的使用&#xff0c;就进一步去了解内存结构&#xff0c;应用程序使用情况&#xff0c;以及内存如何分配、如何回收&#xff0c;这样你才能更好地确定内存的…
阅读更多...
62.乐理基础-打拍子-二八

62.乐理基础-打拍子-二八

前置知识&#xff1a;61.乐理基础-打拍子-休止符打法-CSDN博客 通过前置知识&#xff0c;知道了四分音符、二分音符、附点二分音符、全音符以及它们各自对应的休止符拍子的打法&#xff0c;如下图&#xff0c;它们都是最简单的&#xff0c;因为它们都是一拍的整数倍&#xff0…
阅读更多...
竞赛保研 基于YOLO实现的口罩佩戴检测 - python opemcv 深度学习

竞赛保研 基于YOLO实现的口罩佩戴检测 - python opemcv 深度学习

文章目录 0 前言1 课题介绍2 算法原理2.1 算法简介2.2 网络架构 3 关键代码4 数据集4.1 安装4.2 打开4.3 选择yolo标注格式4.4 打标签4.5 保存 5 训练6 实现效果6.1 pyqt实现简单GUI6.3 视频识别效果6.4 摄像头实时识别 7 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xf…
阅读更多...
山海鲸开发者视角：帮助汽车制造商取得市场优势

山海鲸开发者视角：帮助汽车制造商取得市场优势

山海鲸可视化是一款致力于数字孪生领域的产品&#xff0c;为各行各业提供专业的数据可视化解决方案。作为山海鲸开发者&#xff0c;我们在开发免费好用的数字孪生工具同时也希望能让大家通过多种解决方案了解我们软件的多种可能性&#xff0c;本文就为大家介绍我们的汽车行业解…
阅读更多...
JUC并发编程 09——队列同步器AQS

JUC并发编程 09——队列同步器AQS

目录 一.Lock接口 1.1Lock的使用 1.2Lock接口提供的 synchronized 不具备的主要特性 1.3Lock接口的所有方法 二.队列同步器(AQS) 2.1队列同步器的接口与示例 2.2AQS实现源码分析 ①同步队列 ②获取锁 ③释放锁 一.Lock接口 说起锁&#xff0c;你肯定会想到 synchron…
阅读更多...
MY FILE SERVER: 1

MY FILE SERVER: 1

下载地址 https://download.vulnhub.com/myfileserver/My_file_server_1.ova 首先我们需要发现ip 我的kali是59.162所以167就是靶机的 然后我们拿nmap扫一下端口 nmap -sV -p- 192.168.59.167 扫完发现有七个端口开放 按照习惯先看80 没看到有啥有用信息,用nikto扫一下 nik…
阅读更多...
中文论文修改和润色哪个好写 papergpt

中文论文修改和润色哪个好写 papergpt

大家好&#xff0c;今天来聊聊中文论文修改和润色哪个好写&#xff0c;希望能给大家提供一点参考。 以下是针对论文重复率高的情况&#xff0c;提供一些修改建议和技巧&#xff0c;可以借助此类工具&#xff1a; 标题&#xff1a;中文论文修改与润色&#xff1a;哪个更容易写&…
阅读更多...
家校互通小程序实战开发01需求分析

家校互通小程序实战开发01需求分析

目录 1 角色的划分2 用例分析3 创建业务数据源4 创建登录用户数据源总结 最近几年&#xff0c;随着移动互联网的深入发展&#xff0c;我们的日常生活和工作和微信已经紧密绑定。其实&#xff0c;有时候生活和工作的界限已经不明显&#xff0c;在我们的微信好友里既有家人、朋友…
阅读更多...
助力打造清洁环境，基于美团最新YOLOv6-4.0开发构建公共场景下垃圾堆放垃圾桶溢出检测识别系统

助力打造清洁环境，基于美团最新YOLOv6-4.0开发构建公共场景下垃圾堆放垃圾桶溢出检测识别系统

公共社区环境生活垃圾基本上是我们每个人每天几乎都无法避免的一个问题&#xff0c;公共环境下垃圾投放点都会有固定的值班时间&#xff0c;但是考虑到实际扔垃圾的无规律性&#xff0c;往往会出现在无人值守的时段内垃圾堆放垃圾桶溢出等问题&#xff0c;有些容易扩散的垃圾比…
阅读更多...
VMware vcenter6.7安装（基于windows客户端）

VMware vcenter6.7安装（基于windows客户端）

一、下载vcenter6.7 1.下载地址&#xff0c;直接复制粘贴到web回车即可&#xff0c;这一步就不截图了。 从官网或者百旺网盘&#xff08;可以自行搜索&#xff0c;或者私信我要&#xff09; 二、安装部署vcenter6.7 将下载好的镜像文件拷贝到一台Windows机器上&#xff0c;…
阅读更多...
docker-compose 安装Sonar并集成gitlab

docker-compose 安装Sonar并集成gitlab

文章目录 1. 前置条件2. 编写docker-compose-sonar.yml文件3. 集成 gitlab4. Sonar Login with GitLab 1. 前置条件 安装docker-compose 安装docker 创建容器运行的特有网络 创建挂载目录 2. 编写docker-compose-sonar.yml文件 version: "3" services:sonar-postgre…
阅读更多...
智能优化算法应用：基于法医调查算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用：基于法医调查算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于法医调查算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于法医调查算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.法医调查算法4.实验参数设定5.算法结果6.…
阅读更多...
dpdk原理概述及核心源码剖析

dpdk原理概述及核心源码剖析

dpdk原理 1、操作系统、计算机网络诞生已经几十年了&#xff0c;部分功能不再能满足现在的业务需求。如果对操作系统做更改&#xff0c;成本非常高&#xff0c;所以部分问题是在应用层想办法解决的&#xff0c;比如前面介绍的协程、quic等&#xff0c;都是在应用层重新开发的框…
阅读更多...
Modbus转Profinet网关解决设备通讯不稳的问题

Modbus转Profinet网关解决设备通讯不稳的问题

通讯不稳定&#xff1a;表现为数据断断续续&#xff0c;多半是由于线路干扰、接口不匹配、程序不稳定、等原因造成。 解决方案&#xff1a;在原配电柜添加Modbus转Profinet网关&#xff08;XD-MDPN100/2000&#xff09;即可解决通迅该问题&#xff0c;Modbus转Profinet网关&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023