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

文章目录

  • 一、前言
  • 二、封装沉浸式状态栏管理类
    • 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 abilityhilog.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.hqwc.cn/news/299393.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

防止synplify优化ILA模块或信号

防止synplify优化ILA模块或信号

摘要&#xff1a;synplify综合的时候会优化掉没有用到的信号或者模块&#xff0c;为防止synplify优化ILA或信号特记录此方法&#xff1b; 我使用的是synplify_pro compile完成之后&#xff0c;可以打开synplify图形化的网表 1.防止synplify优化wire信号 在vivado里面一般可以…
阅读更多...
多重断言插件之pytest-assume的简单使用

多重断言插件之pytest-assume的简单使用

背景&#xff1a; pytest-assume是Pytest框架的一个扩展&#xff0c;它允许在单个测试用例中多次断言。通常情况下&#xff0c;当一个断言失败时&#xff0c;测试会立即停止执行&#xff0c;而pytest-assume允许我 们继续执行剩余的断言&#xff0c;以便查看更多的失败信息。…
阅读更多...
opencv入门到精通——形态学转换

opencv入门到精通——形态学转换

目录 目标 理论 1. 侵蚀 2. 扩张 3. 开运算 4. 闭运算 5. 形态学梯度 6. 顶帽 7. 黑帽 结构元素 目标 在这一章当中&#xff0c; 我们将学习不同的形态学操作&#xff0c;例如侵蚀&#xff0c;膨胀&#xff0c;开运算&#xff0c;闭运算等。我们将看到不同的功能&…
阅读更多...
浙江大唐乌沙山电厂选择ZStack Cloud打造新一代云基础设施

浙江大唐乌沙山电厂选择ZStack Cloud打造新一代云基础设施

浙江大唐乌沙山电厂选择云轴科技ZStack Cloud云平台为其提供高性能、高可用的云主机、云存储和云网络&#xff0c;构建了简单、稳定、安全、高效的云基础设施&#xff1b;通过ZStackCloud为其提供可视化服务编排、多租户自服务等模块&#xff0c;帮助电厂提高IT资源利用率&…
阅读更多...
vivado 多周期路径与时钟相移

vivado 多周期路径与时钟相移

多周期路径与时钟相移 有时&#xff0c;必须在具有相同时钟域的两个时钟域之间定义定时约束时钟周期&#xff0c;但两个时钟之间的相移。在这些情况下&#xff0c;理解正时引擎使用的默认设置和保持关系。如果没有仔细调整两个时钟之间的相移可能导致两个时钟间的逻辑约束过大…
阅读更多...
360压缩安装一半不动了怎么办？

360压缩安装一半不动了怎么办？

360压缩软件是我们常用的压缩软件&#xff0c;但是常常会遇到压缩安装到一半停止的情况&#xff0c;下面提供了一些可能的原因和解决办法&#xff0c;大家可以进行尝试~ 方法一&#xff1a;关闭防火墙和杀毒软件 有时候&#xff0c;防火墙和杀毒软件可能会阻止360压缩的安装过…
阅读更多...
抖店可以上传多少产品？抖店的细节问题解答，电商王路飞分享

抖店可以上传多少产品？抖店的细节问题解答，电商王路飞分享

我是王路飞。 精细化运营阶段&#xff0c;抖店的一切运营方式、玩法、类目、商品数量等&#xff0c;都必须可控。 现在不是初期草莽阶段了&#xff0c;抖店可以长期做下去&#xff0c;所以我们不能挑战风险&#xff0c;也不能挑战概率。 那么关于一个抖店内可以上传多少个产…
阅读更多...
哪个猫粮好？五款备受好评的主食冻干猫粮推荐！

哪个猫粮好？五款备受好评的主食冻干猫粮推荐！

还有谁是在盯着大促、等着进口冻干猫粮降价给自家小猫薅一波羊毛&#xff01;进口冻干猫粮的羊毛是国内可以薅到的吗&#xff1f;国产冻干猫粮的价格主要受到原材料成本、生产和运输成本这两项的影响&#xff0c;然而进口冻干猫粮还要受到汇率波动和关税的影响。羊毛出在羊身上…
阅读更多...
【网络安全/CTF】catcat-new

【网络安全/CTF】catcat-new

该题考察文件包含漏洞 正文 看到file参数&#xff0c;考虑文件读取 读取当前进程的命令行参数 ?file../../../../proc/self/cmdline读取app.py&#xff1a; bimport os\nimport uuid\nfrom flask import Flask, request, session, render_template, Markup\nfrom cat import …
阅读更多...
Ai画板原理

Ai画板原理

在创建时画板可以选择数量和排列方式 也可以采用这个图片左上的画板工具&#xff0c;选择画板在其他地方画框即可生成&#xff0c;同时可以在属性框中可以修改尺寸大小 选择全部重新排列可以进行创建时的布局
阅读更多...
Wi-Fi、蓝牙、ZigBee等多类型无线连接方式的安全物联网网关设计

Wi-Fi、蓝牙、ZigBee等多类型无线连接方式的安全物联网网关设计

随着物联网和云计算技术的飞速发展.物联网终端的数量越来越多&#xff0c;终端的连接方式也更趋多样化&#xff0c;比如 Wi-Fi蓝牙和 ZigBee 等。现有的物联网网关大多仅支持一种或者几种终端的接人方式。无法满足终端异构性的需求。同时&#xff0c;现有的物联网网关与终端设备…
阅读更多...
SpringMVC之跨域请求

SpringMVC之跨域请求

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 SpringMVC之跨域请求 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 系列文章目录前言一、什么是同源策略…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023