本文总结一下常用的窗口管理、屏幕管理常用的方法,封装作为一个工具类,统一管理使用。例如获取屏幕长宽,获取状态栏和导航栏的高度,设置状态栏属性,设置横竖屏,设置沉浸式全屏等方法。
实现效果:
演示.gif
封装工具类api
方法名 | 介绍 |
---|---|
getWindow() | 获取应用主窗口 |
getWindowWidth() | 获取主窗口宽度 |
getWindowHeight() | 获取主窗口高度 |
getStatusHeight() | 获取状态栏高度 |
getNavHeight() | 获取导航栏高度 |
setWindowFullScreen() | 设置沉浸式全屏 |
isFullScreen() | 当前窗口布局是否沉浸式 |
setWindowSystemBar() | 设置状态栏属性 |
setSystemBarHiddenShow() | 隐藏状态栏和导航栏 |
setOrientationPortrait() | 设置竖屏 |
setOrientationLandscape() | 设置横屏 |
setOrientationAuto() | 跟随传感器自动旋转 |
getPreferredOrientationIsPortrait() | 判断当前是竖屏还是横屏 |
getStatusBarMargin() | 计算页面顶部两侧按钮的左右边距 |
源码:
import { display, window } from "@kit.ArkUI";
export class WindowUtils{
public static windowStage: window.WindowStage
public static getWindowStage(): window.WindowStage | undefined{
if (WindowUtils.windowStage) {
return WindowUtils.windowStage
}
return undefined
}
public static getWindow(): window.Window | undefined{
if (WindowUtils.windowStage) {
return WindowUtils.windowStage.getMainWindowSync()
}
return undefined;
}
//获取主窗口宽度
public static getWindowWidth(): number {
if (WindowUtils.windowStage) {
return WindowUtils.windowStage.getMainWindowSync().getWindowProperties().windowRect.width;
}
return 0
}
//获取主窗口高度
public static getWindowHeight(): number {
if (WindowUtils.windowStage) {
return WindowUtils.windowStage.getMainWindowSync().getWindowProperties().windowRect.height;
}
return 0
}
//获取状态栏高度
public static getStatusHeight(): number {
if (WindowUtils.windowStage) {
return WindowUtils.windowStage.getMainWindowSync().getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height;
}
return 0;
}
//获取导航栏高度
public static getNavHeight(): number {
if (WindowUtils.windowStage) {
return WindowUtils.windowStage.getMainWindowSync().getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR).bottomRect.height;
}
return 0;
}
//设置沉浸式全屏
//1.单个页面实现沉浸式,优先考虑使用expandSafeArea属性扩展安全区域的方案实现
//2.若必须使用setWindowLayoutFullScreen()方法实现沉浸式,
// 可在NavDestination组件的onShown生命周期中进入沉浸式,onHidden生命周期中退出沉浸式。
// 如果使用的是Router进行路由,可在组件的onPageShow生命周期中进入沉浸式,onPageHide生命周期中退出沉浸式
public static setWindowFullScreen(isLayoutFullScreen: boolean) {
if (!WindowUtils.windowStage) {
return;
}
WindowUtils.windowStage.getMainWindowSync().setWindowLayoutFullScreen(isLayoutFullScreen)
}
//当前窗口布局是否沉浸式
public static isFullScreen():boolean{
if (WindowUtils.windowStage) {
return WindowUtils.windowStage.getMainWindowSync().getWindowProperties().isLayoutFullScreen
}
return false
}
//设置状态栏属性
//设置了状态栏内容颜色statusBarContentColor isStatusBarLightIcon属性将不生效
public static setWindowSystemBar(properties:CustomSystemBarProperties= {
statusBarColor: '#FFFFFF',
isStatusBarLightIcon: false,
statusBarContentColor: '#000000',
enableStatusBarAnimation: false}){
if (!WindowUtils.windowStage) {
return;
}
WindowUtils.windowStage.getMainWindowSync().setWindowSystemBarProperties({
statusBarColor:properties.statusBarColor, //状态栏背景颜色
isStatusBarLightIcon:properties.isStatusBarLightIcon, //状态栏图标是否为高亮状态
statusBarContentColor:properties.statusBarContentColor,//状态栏文字颜色
enableStatusBarAnimation:properties.enableStatusBarAnimation //是否使能状态栏属性变化时动画效果
})
}
//隐藏状态栏和导航栏
public static setSystemBarHiddenShow(show:boolean){
if (show) {
WindowUtils.windowStage.getMainWindowSync().setWindowLayoutFullScreen(show)
WindowUtils.windowStage.getMainWindowSync().setWindowSystemBarEnable([]);
}else {
WindowUtils.windowStage.getMainWindowSync().setWindowLayoutFullScreen(show)
WindowUtils.windowStage.getMainWindowSync().setWindowSystemBarEnable(['status', 'navigation']);
}
}
//设置竖屏
public static setOrientationPortrait(){
WindowUtils.windowStage.getMainWindowSync().setPreferredOrientation(1)
}
//设置横屏
public static setOrientationLandscape(){
WindowUtils.windowStage.getMainWindowSync().setPreferredOrientation(2)
}
//跟随传感器自动旋转
public static setOrientationAuto(){
WindowUtils.windowStage.getMainWindowSync().setPreferredOrientation(5)
}
//判断当前是竖屏还是横屏 竖屏返回true
public static getPreferredOrientationIsPortrait():boolean{
if (display.getDefaultDisplaySync().orientation.valueOf() == 0||2) {
return true
}else if (display.getDefaultDisplaySync().orientation.valueOf() == 1||3){
return false
}
return false
}
//计算页面顶部两侧按钮的左右边距
//1.挖孔在左边,则左侧按钮左边距 = 挖孔距屏幕左侧边缘的距离 + 挖孔区域的宽度
//2.挖孔在右侧,则右侧按钮右边距 = 挖孔距屏幕右侧边缘的距离 + 挖孔区域的宽度
public static async getStatusBarMargin(): Promise<StatusBarMargin> {
let cutoutInfo = await display.getDefaultDisplaySync().getCutoutInfo()
let boundingRects = cutoutInfo .boundingRects
if (!boundingRects || boundingRects.length === 0) {
return { left: 0, right: 0 };
}
const cutoutRect = boundingRects[0];
const cutoutLeftGap = cutoutRect.left;
const cutoutWidth = cutoutRect.width;
const cutoutRightGap = WindowUtils.getWindowWidth() - cutoutLeftGap - cutoutWidth;
if (Math.abs(cutoutLeftGap - cutoutRightGap) <= 10) {
return { left: 0, right: 0 };
}
if (cutoutLeftGap < cutoutRightGap) {
return { left: cutoutLeftGap + cutoutWidth, right: 0 };
}
return { left: 0, right: cutoutRightGap + cutoutWidth };
}
}
export interface CustomSystemBarProperties{
statusBarColor?:string
isStatusBarLightIcon?:boolean
statusBarContentColor?:string
enableStatusBarAnimation?:boolean
}
@ObservedV2
export class StatusBarMargin{
@Trace left: number =0
@Trace right: number = 0
}
EntryAbility初始化:
onWindowStageCreate(windowStage: window.WindowStage): void {
WindowUtils.windowStage = windowStage
}