鸿蒙Next窗口屏幕管理工具总结

本文总结一下常用的窗口管理、屏幕管理常用的方法,封装作为一个工具类,统一管理使用。例如获取屏幕长宽,获取状态栏和导航栏的高度,设置状态栏属性,设置横竖屏,设置沉浸式全屏等方法。
实现效果:

演示.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
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容