一、引言
在鸿蒙应用开发的征程中,如何高效地管理页面布局与显示,以满足用户对于沉浸式体验、个性化StatusBar颜色等界面特性的需求,一直是开发者们关注的焦点。为此,我特别设计了一款实用的“页面管理工具类”,它具备强大的功能,能帮助开发者轻松应对各种页面管理挑战。
二、页面管理工具类:你的界面掌控利器
页面管理工具类如同一位界面掌控的利器,为开发者提供了一系列专业的静态属性与方法。借助这些功能,开发者能够轻松获取页面的关键信息,如顶部安全区域高度、底部安全区域高度,以及全屏开发状态和状态栏颜色等。这一工具类无疑是鸿蒙应用开发中不可或缺的一部分。
三、核心属性大揭秘
static statusBarHeight: 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']);
}
}
}
八、工具类使用说明与注意事项
使用说明
在EntryAbility.ts
文件中,您可以按照以下步骤使用LibWindowHelper
工具类来管理页面布局与显示:
1. 初始化窗口辅助工具
当窗口阶段(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);
}
});
}
2. 启用或禁用全屏显示
通过调用LibWindowHelper.setWindowLayoutFullScreen
方法,您可以轻松地启用或禁用应用的全屏显示模式。传入true
将启用全屏显示,而传入false
则会禁用。
示例代码:
// 启用全屏显示
LibWindowHelper.setWindowLayoutFullScreen(true);
// 禁用全屏显示
LibWindowHelper.setWindowLayoutFullScreen(false);
3. 设置状态栏文字颜色
当状态栏背景为深色时,您可能需要将状态栏的文字颜色设置为深色以提高可读性。使用LibWindowHelper.setStatusBarDarkContent
方法即可实现。
示例代码:
// 设置状态栏文字为深色
LibWindowHelper.setStatusBarDarkContent();
4. 自定义状态栏背景色
LibWindowHelper
允许您通过setStatusBarColor
方法自定义状态栏的背景色。只需传入一个十六进制颜色代码字符串即可。
示例代码:
// 设置状态栏背景色为深灰色
LibWindowHelper.setStatusBarColor('#333333');
5. 控制状态栏的显示与隐藏
您可以使用LibWindowHelper
提供的showStatusBar
和hideStatusBar
方法来控制状态栏的显示与隐藏。
显示状态栏示例代码:
// 显示状态栏
LibWindowHelper.showStatusBar();
隐藏状态栏示例代码:
// 隐藏状态栏
LibWindowHelper.hideStatusBar();
注意事项
LibWindowHelper
的方法之前,已正确导入该类,并且该类已经在您的项目中可用。LibWindowHelper
的文档说明。九、总结
页面管理工具类作为鸿蒙应用开发中的一款实用工具,为开发者提供了强大的页面布局与显示管理能力。通过掌握这一工具类的核心属性和方法,开发者能够轻松应对各种页面管理挑战,为用户带来更加优质、个性化的界面体验。希望本文能够帮助您更好地理解和使用页面管理工具类,为您的鸿蒙应用开发之旅增添更多助力。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。