HarmonyOS 沉浸式状态实现的多种方式

embedded/2024/11/14 14:39:01/

1. HarmonyOS 沉浸式状态实现的多种方式

  HarmonyOS 沉浸式状态实现的多种方式在这里插入图片描述

1.1. 方法一

1.1.1. 实现讲解

（1）首先设置setWindowLayoutFullScreen(true)（设置全屏布局）。
  布局将从屏幕最顶部开始到最底部结束，此时状态栏和底部规避区域还在，且与页面重叠，所以还需要设置页面根容器顶部内边距为状态栏高度，底部内边距为规避区域高度，这样页面就不会重叠。
(2)页面隐藏(或销毁)周期函数内恢复非全屏布局设置setWindowLayoutFullScreen(false)
  全屏布局设置是全局生效的，一旦设置跳转到其他页面同样生效，对于其他页面不需要沉浸式状态栏需要恢复原样。
  全屏布局非全屏显示，区别在于状态栏、规避区域还在，页面布局从屏幕最顶端开始

1.1.2. 代码实现

ImmersePage .ets(页面)

import { window } from '@kit.ArkUI'
import { AppHelper, StatusBarBean } from 'zzslib';
import { AppUtil } from 'zzslib/src/main/ets/util/AppUtil';
@Entry
@Component
struct ImmersePage {@State statusHeight: number = 0 //状态栏高度@State bottomAvoidAreaHeight: number = 0 //手机底部规避区域高度@State windowClass: window.Window | null = null //窗口管理器appHelper = new AppHelper();aboutToAppear() {this.setStatusBar('#00007AFF')this.init()}onPageShow(): void {//设置全屏布局this.windowClass?.setWindowLayoutFullScreen(true)}onPageHide(): void {//取消全屏布局this.windowClass?.setWindowLayoutFullScreen(false)this.setStatusBar('#007AFF')}//初始化init() {window.getLastWindow(getContext(this), (err, windowClass) => {if (!err.code) {//保存窗口管理器this.windowClass = windowClass//获取状态栏高度this.statusHeight = px2vp(windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height)//获取手机底部规避区域高度this.bottomAvoidAreaHeight =px2vp(windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR).bottomRect.height)windowClass.setWindowLayoutFullScreen(true)}})}setStatusBar(statusBarBgColor: string) {let that = thislet statusBarBean = new StatusBarBean()statusBarBean.isFullScreen = falsestatusBarBean.statusBarBgColor = statusBarBgColorstatusBarBean.statusBarTitleColor = '#ffffff'that.appHelper.setStatusBar(statusBarBean)AppUtil.setStatusBar(true, true)}build() {Column() {//页面区域Column() {Text('沉浸式状态栏').fontColor('#fff')}.height('100%').width('100%').border({width: 1,color: 'red'})}.height('100%').width('100%').backgroundImage( $r('app.media.img_bg_page')).backgroundImageSize({ height: '100%', width: '100%' }).padding({ top: this.statusHeight, bottom: this.bottomAvoidAreaHeight })}
}

1.1.3在这里插入图片描述

. 运行效果：

1.1.3. 全局缓存窗口管理器

  当项目内多个页面需要设置全屏布局时，每个页面要重新获取窗口管理器、状态栏高度、底部规避区域高度就比较麻烦，可以在entryabili内获取到上述属性值（对象）并存储在全局对象globalThis上
  EntryAbility.ets

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';export default class EntryAbility extends UIAbility {onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {}onWindowStageCreate(windowStage: window.WindowStage): void {//添加如下代码windowStage.getMainWindow((err, data) => {if (!err.code) {//全局变量添加窗口对象globalThis.windowClass = data;//全局变量添加状态栏高度单位vpglobalThis.statusHeight = px2vp(data.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height)//全局添加底部规避区域高度单位vpglobalThis.bottomAvoidAreaHeight = px2vp(data.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR).bottomRect.height)}})//windowStage.loadContent('pages/Index', (err) => {if (err.code) {return;}});}}

  Index.ets(页面)

import { window } from '@kit.ArkUI'@Entry
@Component
struct Index {onPageShow(): void {//设置全屏布局globalThis.windowClass.setWindowLayoutFullScreen(true)}onPageHide(): void {//取消全屏布局globalThis.windowClass.setWindowLayoutFullScreen(false)}build() {Column() {//页面区域Column() {Text('沉浸式状态栏').fontColor('#fff')}.height('100%').width('100%').border({width: 1,color: 'red'})}.height('100%').width('100%').backgroundImage( $r('app.media.img_bg_page')).backgroundImageSize({ height: '100%', width: '100%' }).padding({ top: globalThis.statusHeight, bottom: globalThis.bottomAvoidAreaHeight })}
}

1.2. 方法二

1.2.1. 实现讲解

  通过NavDestination作为页面根容器，并隐藏标题栏即可快速实现沉浸式状态，NavDestination从api 11开始默认支持安全区避让特性，所以关于页面重叠问题就不需要解决

1.2.2. 代码实现

  Index.ets(页面)

@Entry
@Component
struct Index{build() {NavDestination(){//页面区域Column(){Text('沉浸式状态栏').fontColor('#fff')}.width('100%').height('100%').border({width:1,color:'red'})}.hideTitleBar(true).backgroundImage( $r('app.media.img_bg_page')).backgroundImageSize({height:'100%',width:'100%'})}
}

1.2.3. 运行效果：

在这里插入图片描述

1.3. 方法三

1.3.1. 实现讲解

  通过expandSafeArea属性支持组件不改变布局情况下扩展其绘制区域至安全区外

1.3.2. 代码实现

@Entry
@Component
struct Index {build() {Stack() {Image($r('app.media.img_bg_page')).height('100%').width('100%').expandSafeArea()//页面区域Column() {Text('沉浸式状态栏').fontColor('#fff')}.height('100%').width('100%').border({width: 1,color: 'red'})}.height('100%').width('100%')}
}

  如果只需要头部区域沉浸
在这里插入图片描述
  实现代码：

@Entry
@Component
struct Index {build() {Column() {Column() {Text('沉浸式状态栏').fontColor('#fff')}.height(100).width('100%').backgroundColor('#0A7EE6').expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])}.height('100%').width('100%')}
}

  如果想修改状态栏文字颜色可通过：setWindowSystemBarProperties实现

   window.getLastWindow(getContext(this), (err, windowClass) => {if (!err.code) {windowClass.setWindowSystemBarProperties({statusBarContentColor:"#ffffff"})}})

在这里插入图片描述

1.4.封装

1.4.1. 封装状态栏管理类

  我们在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;}
}

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

（1）get- 获取管理类单例实例
（2）storeWindowStage- 存储windowStage实例
（3）该方法在UIAbility中进行调用。
（4）getWindowStage- 获取windowStage实例
（5）setImmersiveStatusBar- 设置沉浸式状态栏
（6）hideImmersiveStatusBar- 关闭沉浸式状态栏
（7）storeStatusBarHeight- （内部私有方法）获取状态栏高度进行保存
（8）getSystemBarOffset- 获取状态栏高度（沉浸式状态栏下需要调整的标题偏移量）
（9）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.4.3.完整代码

import { StatusBarManager } from '../../../utils/StatusBarManager';@Entry
@Component
struct Immerse3Page {@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;})}}
}

在这里插入图片描述


http://www.ppmy.cn/embedded/137518.html

相关文章

基于yolov8、yolov5的番茄成熟度检测识别系统（含UI界面、训练好的模型、Python代码、数据集）

基于yolov8、yolov5的番茄成熟度检测识别系统（含UI界面、训练好的模型、Python代码、数据集）

摘要&#xff1a;番茄成熟度检测在农业生产及质量控制中起着至关重要的作用&#xff0c;不仅能帮助农民及时采摘成熟的番茄&#xff0c;还为自动化农业监测提供了可靠的数据支撑。本文介绍了一款基于YOLOv8、YOLOv5等深度学习框架的番茄成熟度检测模型&#xff0c;该模型使用了…
阅读更多...
C语言 | Leetcode C语言题解之第552题学生出勤记录II

C语言 | Leetcode C语言题解之第552题学生出勤记录II

题目&#xff1a; 题解&#xff1a; const int MOD 1000000007;struct Matrix {long mat[6][6];int row, col; };struct Matrix multiply(struct Matrix a, struct Matrix b) {int rows a.row, columns b.col, temp b.row;struct Matrix c;memset(c.mat, 0, sizeof(c.mat)…
阅读更多...
Unet++改进24：添加DualConv||轻量级深度神经网络的双卷积核

Unet++改进24：添加DualConv||轻量级深度神经网络的双卷积核

本文内容：添加DualConv 目录 论文简介 1.步骤一 2.步骤二 3.步骤三 4.步骤四 论文简介 卷积神经网络(CNN)架构通常对内存和计算要求很高，这使得它们在硬件资源有限的嵌入式系统中不可行。 我们提出了双卷积核(DualConv)来构建轻量级深度神经网络。DualConv结合3 3和1…
阅读更多...
基于微信小程序的高校实习管理系统设计与实现，LW+源码+讲解

基于微信小程序的高校实习管理系统设计与实现，LW+源码+讲解

摘 要 信息数据从传统到当代&#xff0c;是一直在变革当中&#xff0c;突如其来的互联网让传统的信息管理看到了革命性的曙光&#xff0c;因为传统信息管理从时效性&#xff0c;还是安全性&#xff0c;还是可操作性等各个方面来讲&#xff0c;遇到了互联网时代才发现能补上自…
阅读更多...
Unity Assembly Definition Assembly Definition Reference

Unity Assembly Definition Assembly Definition Reference

文章目录 1.Unity 预定义程序集2.Assembly definition3. Assembly definitions相关实验 1.Unity 预定义程序集 Unity 有4个预定义程序集&#xff1a; 阶段程序集名脚本文件1Assembly-CSharp-firstpassStandard Assets, Pro Standard Assets和Plugins文件夹下面的运行时脚本2A…
阅读更多...
q8：docker build构建镜像 yum -y install vim报错

q8：docker build构建镜像 yum -y install vim报错

报错信息&#xff1a;1.295 Could not retrieve mirrorlist http://mirrorlist.centos.org/?release7&archx86_64&repoos&infracontainer error was 1.295 14: curl#6 - "Could not resolve host: mirrorlist.centos.org; Unknown error" 在dockerfile…
阅读更多...
MATLAB小波变换图像融合系统

MATLAB小波变换图像融合系统

MATLAB小波变换图像融合系统 二、应用背景及意义 本课题利用小波变换进行图像的融合&#xff0c;然后对融合的结果进行图像质量的评价。所谓小波变换图像融合就是对多个的信息目标进行一系列的图像提取和合成&#xff0c;进而可以获得对同一个信息目标的更为精确、全面、可靠…
阅读更多...
基于Qt/C++全局键盘和鼠标事件监控工具

基于Qt/C++全局键盘和鼠标事件监控工具

项目介绍&#xff1a; 该项目实现了一个基于 Qt 框架的全局键盘和鼠标事件监控工具&#xff0c;主要功能包括&#xff1a; 实时监控全局键盘事件&#xff1a;捕获并显示所有键盘按键&#xff0c;并将按键的虚拟键码转为键名显示。实时监控全局鼠标事件&#xff1a;捕获并显示…
阅读更多...
最新文章

Copyright @ 2022~2023