鸿蒙开发实战：鸿蒙应用开发中的页面管理工具类详解-编程知识

鸿蒙开发实战：鸿蒙应用开发中的页面管理工具类详解

news/2024/11/14 8:47:09/文章来源:https://www.cnblogs.com/bkbk1234/p/18545225

一、引言

在鸿蒙应用开发的征程中，如何高效地管理页面布局与显示，以满足用户对于沉浸式体验、个性化 StatusBar 颜色等界面特性的需求，一直是开发者们关注的焦点。为此，我特别设计了一款实用的“页面管理工具类”，它具备强大的功能，能帮助开发者轻松应对各种页面管理挑战。

二、页面管理工具类：你的界面掌控利器

页面管理工具类如同一位界面掌控的利器，为开发者提供了一系列专业的静态属性与方法。借助这些功能，开发者能够轻松获取页面的关键信息，如顶部安全区域高度、底部安全区域高度，以及全屏开发状态和状态栏颜色等。这一工具类无疑是鸿蒙应用开发中不可或缺的一部分。

三、核心属性大揭秘

顶部安全区域高度（状态栏高度）

变量名：static statusBarHeight: number = 0

解读：这一属性帮助开发者快速获取顶部安全区域的高度，即状态栏的高度。通过掌握状态栏占用的屏幕空间，开发者能够更精准地布局页面内容，确保内容不会被遮挡。

底部安全区域高度

变量名：static navigationBarHeight: number = 0

解读：此属性代表底部安全区域的高度，通常对应于导航栏的高度。通过了解这一数值，开发者能够避免页面内容与导航栏重叠，提升用户体验。

全屏开发状态

变量名：static isFullScreenLayout: boolean

解读：这一属性用于判断应用是否处于全屏开发状态。当设置为true时，应用将忽略系统 UI 元素，实现真正的全屏效果；当设置为false时，应用将考虑这些 UI 元素的存在。

当前状态栏内容颜色

变量名：static statusBarContentColor: string

解读：开发者可以通过此属性获取或设置当前状态栏的内容颜色，使状态栏与应用的整体风格保持一致，提升应用的视觉效果和用户体验。

应用主窗口

变量名：static appMainWindow: window.Window

解读：此属性提供了应用主窗口的引用，使开发者能够直接访问主窗口的各种属性和方法，从而实现对窗口的精确控制和管理。

四、初始化方法：轻松启动你的界面掌控之旅

页面管理工具类提供了初始化方法，开发者只需传入相应的参数，即可轻松启动这一工具类。在初始化过程中，工具类会自动获取主窗口对象、设置全屏开发状态，并计算顶部和底部安全区域的高度，为后续的页面布局与管理提供基础数据。

五、实用方法集锦

页面管理工具类还提供了一系列实用的方法，如设置状态栏的透明度、调整导航栏的样式等。这些方法不仅功能强大，而且易于使用，能够帮助开发者快速实现各种界面效果。

六、功能要点分析

setWindowLayoutFullScreen(fullScreen: boolean):

该方法用于控制应用窗口是否全屏显示。

如果appMainWindow存在，则调用其setWindowLayoutFullScreen方法，并传入fullScreen参数。

setStatusBarLightContent 和 setStatusBarDarkContent:

这两个方法分别用于快速设置状态栏文字颜色为白色和黑色。

实际上是调用了setStatusBarContentColor方法并传入相应的颜色值。

setStatusBarContentColor(color: string):

该方法用于设置状态栏文字颜色。

首先检查传入的color是否与当前statusBarContentColor相同，如果相同则直接返回，避免不必要的操作。

如果颜色不同，则更新statusBarContentColor的值，并调用appMainWindow的setWindowSystemBarProperties方法设置状态栏文字颜色。

setStatusBarColor(color: string):

该方法用于设置状态栏背景色。

如果appMainWindow存在，则调用其setWindowSystemBarProperties方法并传入状态栏背景色。

showStatusBar 和 hideStatusBar:

这两个方法分别用于显示和隐藏状态栏。

通过调用appMainWindow的setWindowSystemBarEnable方法，并传入相应的参数来控制状态栏的显示和隐藏。

七、整体代码展示

import window from '@ohos.window'
import { display } from '@kit.ArkUI'
import { UIUtil } from './UIUtil'

/**

关于页面状态栏等
*/
export class LibWindowHelper {
// 顶部状态栏高度
static statusBarHeight: number = 0;

// 底部导航栏高度
static navigationBarHeight: number = 0;

// 是否开启全屏布局
static isFullScreenLayout: boolean;

// 当前状态栏内容颜色
static statusBarContentColor: string;

// 应用主窗口对象
static appMainWindow: window.Window;

// 初始化方法
static initialize(windowStage: window.WindowStage, isFullScreen: boolean) {
// 获取应用主窗口对象
LibWindowHelper.appMainWindow = windowStage.getMainWindowSync();

// 设置全屏布局状态
LibWindowHelper.isFullScreenLayout = isFullScreen;// 如果开启全屏布局，则设置窗口为全屏模式
if (LibWindowHelper.isFullScreenLayout) {LibWindowHelper.appMainWindow.setWindowLayoutFullScreen(isFullScreen);
}// 获取顶部状态栏区域，并计算高度
let avoidAreaTop = LibWindowHelper.appMainWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
LibWindowHelper.statusBarHeight = Number(UIUtil.px2vp(avoidAreaTop.topRect.height).toPrecision(5));// 获取底部导航栏区域，并计算高度
let avoidAreaBottom = LibWindowHelper.appMainWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
LibWindowHelper.navigationBarHeight = Number(UIUtil.px2vp(avoidAreaBottom.bottomRect.height).toPrecision(5));// 监听折叠屏状态
LibWindowHelper.listenDisplayFoldStatus();

}

/**

设置应用窗口全屏布局
@param fullScreen 是否全屏显示
*/
static setWindowLayoutFullScreen(fullScreen: boolean) {
if (LibWindowHelper.appMainWindow) {
LibWindowHelper.appMainWindow.setWindowLayoutFullScreen(fullScreen);
}
}

/**

设置状态栏文字颜色为白色
*/
static setStatusBarLightContent() {
LibWindowHelper.setStatusBarContentColor('#ffffff');
}

/**

设置状态栏文字颜色为黑色
*/
static setStatusBarDarkContent() {
LibWindowHelper.setStatusBarContentColor('#000000');
}

/**

设置状态栏文字颜色
@param color 状态栏文字颜色
*/
static setStatusBarContentColor(color: string) {
// 避免不必要的操作，如果颜色未改变则直接返回
if (color === LibWindowHelper.statusBarContentColor) {
return;
}
LibWindowHelper.statusBarContentColor = color;
if (LibWindowHelper.appMainWindow) {
LibWindowHelper.appMainWindow.setWindowSystemBarProperties({
statusBarContentColor: LibWindowHelper.statusBarContentColor
});
}
}

/**

设置状态栏背景色
@param color 状态栏背景颜色
*/
static setStatusBarColor(color: string) {
if (LibWindowHelper.appMainWindow) {
LibWindowHelper.appMainWindow.setWindowSystemBarProperties({
statusBarColor: color
});
}
}

/**

显示状态栏
*/
static showStatusBar() {
if (LibWindowHelper.appMainWindow) {
LibWindowHelper.appMainWindow.setWindowSystemBarEnable(['status', 'navigation']);
}
}

/**

隐藏状态栏
*/
static hideStatusBar() {
if (LibWindowHelper.appMainWindow) {
LibWindowHelper.appMainWindow.setWindowSystemBarEnable(['navigation']);
}
}

}
cyhh.mxy998.com,cyhh.gjkds.com,cyhh.mbslzp.com
cyhh.sh-soyun.com,cyhh.clzyfc.com

八、工具类使用说明与注意事项

使用说明

在EntryAbility.ts文件中，您可以按照以下步骤使用LibWindowHelper工具类来管理页面布局与显示：

初始化窗口辅助工具

当窗口阶段（windowStage）创建完成后，您需要利用该阶段来初始化LibWindowHelper。通过调用onWindowStageCreate方法并传入windowStage参数，您可以获取主窗口的引用，并使用LibWindowHelper.initialize方法进行初始化。

示例代码：

onWindowStageCreate(windowStage: window.WindowStage) {
windowStage.getMainWindow((err, mainWindow) => {
if (err) {
// 处理获取主窗口时发生的错误
console.error('获取主窗口时出错：', err);
} else {
// 初始化窗口辅助工具，设置全屏显示模式为true
LibWindowHelper.initialize(mainWindow, true);
}
});
}
cyhh.ousnled.com,cyhh.syshuangyihe.com,cyhh.eyeql.com
cyhh.xyfhm.com,cyhh.nc-lh.com