文章目录一、前言二、工具函数方法一览三、方法逐一详解3.1 getWidth() 与 getHeight()3.2 getOrientation() — 获取屏幕方向3.3 getDisplayState() — 获取显示状态四、完整演示代码4.1 数据加载4.2 UI 渲染尺寸与方向页五、实际应用场景场景 1横竖屏布局切换场景 2计算可用空间结合状态栏高度场景 3判断屏幕是否亮屏六、小结一、前言近期发现一款很有意思的HarmonyOS 三方库, 地址 pura/harmony-utils(V1.4.0) , 作者是桃花镇童长老, 我这里也是直接通过该作者公布的源码进行案例编写进行,写了到目前写了一部分demo ,感觉确实很有帮助,这里呢也是开始写一个系列的演示demo 供大家参考。如有帮助可以在OpenHarmony中进行下载安装进行使用哦案例demo导航展示↓↓↓↓↓↓接下来言归正传 ↓↓↓↓在开发 HarmonyOS 应用时经常需要知道屏幕宽高是多少用于计算布局尺寸当前屏幕是竖屏还是横屏用于旋转适配屏幕当前的显示状态是什么是否亮屏、是否 VR 模式DisplayUtil提供了getWidth()、getHeight()、getOrientation()、getDisplayState()四个方法来解答这些问题。本文结合DisplayUtilDemoPage.ets中的完整演示代码进行详细讲解。二、工具函数方法一览// 获取屏幕宽度pxstaticgetWidth():number// 获取屏幕高度pxstaticgetHeight():number// 获取当前显示方向0竖屏/1横屏/2反向竖屏/3反向横屏staticgetOrientation():display.Orientation// 获取显示设备当前状态关闭/开启/低电耗/睡眠/VR等staticgetDisplayState():display.DisplayState三、方法逐一详解3.1getWidth()与getHeight()源码staticgetWidth():number{returnDisplayUtil.getDefaultDisplaySync().width;}staticgetHeight():number{returnDisplayUtil.getDefaultDisplaySync().height;}说明两个方法本质上都是先获取默认Display对象再取width或height字段。返回值单位为物理像素px。注意ArkUI 布局中用的是vp虚拟像素vp px / densityPixels。如果要用于布局计算需要做单位换算。Demo 使用loadScreenSize(){this.screenWidth${DisplayUtil.getWidth()}px;this.screenHeight${DisplayUtil.getHeight()}px;// ...}3.2getOrientation()— 获取屏幕方向源码staticgetOrientation():display.Orientation{returnDisplayUtil.getDefaultDisplaySync().orientation;}display.Orientation枚举值说明枚举值数字含义PORTRAIT0竖屏正常持握手机方向LANDSCAPE1横屏向左旋转 90°PORTRAIT_INVERTED2反向竖屏倒置手机LANDSCAPE_INVERTED3反向横屏向右旋转 90°Demo 中的枚举转换getOrientationLabel(orientation:display.Orientation):string{switch(orientation){casedisplay.Orientation.PORTRAIT:return竖屏 (PORTRAIT0);casedisplay.Orientation.LANDSCAPE:return横屏 (LANDSCAPE1);casedisplay.Orientation.PORTRAIT_INVERTED:return反向竖屏 (PORTRAIT_INVERTED2);casedisplay.Orientation.LANDSCAPE_INVERTED:return反向横屏 (LANDSCAPE_INVERTED3);default:return未知 (${orientation});}}使用loadOrientation(){constorientationDisplayUtil.getOrientation();this.orientationValueorientation.toString();this.orientationLabelthis.getOrientationLabel(orientation);// ...}3.3getDisplayState()— 获取显示状态源码staticgetDisplayState():display.DisplayState{returnDisplayUtil.getDefaultDisplaySync().state;}display.DisplayState枚举值说明枚举值数字含义STATE_UNKNOWN0状态未知STATE_OFF1显示设备已关闭熄屏STATE_ON2显示设备已开启亮屏STATE_DOZE3低电耗模式息屏显示STATE_DOZE_SUSPEND4睡眠模式CPU 挂起STATE_VR5VR 模式STATE_ON_SUSPEND6亮屏但 CPU 挂起Demo 中的枚举转换getDisplayStateLabel(state:display.DisplayState):string{switch(state){casedisplay.DisplayState.STATE_UNKNOWN:return未知 (STATE_UNKNOWN0);casedisplay.DisplayState.STATE_OFF:return关闭 (STATE_OFF1);casedisplay.DisplayState.STATE_ON:return开启 (STATE_ON2);casedisplay.DisplayState.STATE_DOZE:return低电耗 (STATE_DOZE3);casedisplay.DisplayState.STATE_DOZE_SUSPEND:return睡眠 (STATE_DOZE_SUSPEND4);casedisplay.DisplayState.STATE_VR:returnVR模式 (STATE_VR5);casedisplay.DisplayState.STATE_ON_SUSPEND:return亮屏挂起 (STATE_ON_SUSPEND6);default:return未知 (${state});}}四、完整演示代码4.1 数据加载loadScreenSize(){this.screenWidth${DisplayUtil.getWidth()}px;this.screenHeight${DisplayUtil.getHeight()}px;// 计算屏幕尺寸英寸try{constdDisplayUtil.getDefaultDisplaySync();constwInchd.width/d.densityDPI;consthInchd.height/d.densityDPI;constdiagMath.sqrt(wInch*wInchhInch*hInch);this.screenSize${diag.toFixed(2)}英寸 (${wInch.toFixed(2)}x${hInch.toFixed(2)});}catch(e){this.screenSize计算失败;}this.addLog(Size,屏幕尺寸:${this.screenWidth}x${this.screenHeight},info);}loadOrientation(){constorientationDisplayUtil.getOrientation();this.orientationValueorientation.toString();this.orientationLabelthis.getOrientationLabel(orientation);conststateDisplayUtil.getDisplayState();this.displayStateValuestate.toString();this.displayStateLabelthis.getDisplayStateLabel(state);this.addLog(Orientation,方向:${this.orientationLabel}, 状态:${this.displayStateLabel},info);}4.2 UI 渲染尺寸与方向页// ══ 尺寸与方向 ══════════════════════════════════════if(this.activeTab1){// 屏幕尺寸Column(){Text(屏幕尺寸).fontSize(13).fontColor(#666).fontWeight(FontWeight.Medium).alignSelf(ItemAlign.Start).margin({bottom:10})Row(){Column(){Text(this.screenWidth.split( )[0]).fontSize(28).fontWeight(FontWeight.Bold).fontColor(#4080FF)Text(宽度 px).fontSize(11).fontColor(#888)}.layoutWeight(1).alignItems(HorizontalAlign.Center)Text(×).fontSize(20).fontColor(#CCC)Column(){Text(this.screenHeight.split( )[0]).fontSize(28).fontWeight(FontWeight.Bold).fontColor(#00C853)Text(高度 px).fontSize(11).fontColor(#888)}.layoutWeight(1).alignItems(HorizontalAlign.Center)Text(≈).fontSize(20).fontColor(#CCC)Column(){Text(this.screenSize.split( )[0]).fontSize(22).fontWeight(FontWeight.Bold).fontColor(#D63384)Text(对角线英寸).fontSize(11).fontColor(#888)}.layoutWeight(1).alignItems(HorizontalAlign.Center)}.width(100%).margin({bottom:6})Text(this.screenSize).fontSize(11).fontColor(#888).width(100%).textAlign(TextAlign.Center)Button(刷新尺寸信息).fontSize(12).height(34).margin({top:10}).backgroundColor(#4080FF).fontColor(#FFF).onClick((){this.loadScreenSize();})}.width(100%).padding(14).backgroundColor(#FFFFFF).borderRadius(12)// 屏幕方向Column(){Text(屏幕方向 getOrientation()).fontSize(13).fontColor(#666).fontWeight(FontWeight.Medium).alignSelf(ItemAlign.Start).margin({bottom:8})Row(){Text(当前方向:).fontSize(12).fontColor(#888)Text(this.orientationLabel).fontSize(12).fontWeight(FontWeight.Bold).fontColor(#4080FF).margin({left:6})Text((数值:${this.orientationValue})).fontSize(11).fontColor(#AAA).margin({left:4})}.width(100%).margin({bottom:8})Row(){Text(显示状态:).fontSize(12).fontColor(#888)Text(this.displayStateLabel).fontSize(12).fontWeight(FontWeight.Bold).fontColor(this.displayStateLabel.includes(开启)?#00C853:#FF9800).margin({left:6})Text((数值:${this.displayStateValue})).fontSize(11).fontColor(#AAA).margin({left:4})}.width(100%).margin({bottom:10})Button(刷新方向信息).fontSize(12).height(34).backgroundColor(#4080FF).fontColor(#FFF).onClick((){this.loadOrientation();})}.width(100%).padding(14).backgroundColor(#FFFFFF).borderRadius(12)// Orientation 枚举说明this.buildSectionCard(Orientation 枚举值说明,[{label:PORTRAIT 0,value:竖屏},{label:LANDSCAPE 1,value:横屏},{label:PORTRAIT_INVERTED 2,value:反向竖屏},{label:LANDSCAPE_INVERTED 3,value:反向横屏},]asSectionRow[])// DisplayState 说明this.buildSectionCard(DisplayState 枚举值说明,[{label:STATE_UNKNOWN 0,value:未知},{label:STATE_OFF 1,value:关闭},{label:STATE_ON 2,value:开启},{label:STATE_DOZE 3,value:低电耗},{label:STATE_DOZE_SUSPEND 4,value:睡眠},{label:STATE_VR 5,value:VR模式},{label:STATE_ON_SUSPEND 6,value:亮屏挂起},]asSectionRow[])}五、实际应用场景场景 1横竖屏布局切换constorientationDisplayUtil.getOrientation();if(orientationdisplay.Orientation.LANDSCAPE||orientationdisplay.Orientation.LANDSCAPE_INVERTED){// 横屏布局两列显示this.columnCount2;}else{// 竖屏布局单列显示this.columnCount1;}场景 2计算可用空间结合状态栏高度constscreenHeightDisplayUtil.getHeight();conststatusBarHeightAppUtil.getStatusBarHeight();// 获取状态栏高度constavailableHeightscreenHeight-statusBarHeight;场景 3判断屏幕是否亮屏conststateDisplayUtil.getDisplayState();if(statedisplay.DisplayState.STATE_ON){// 屏幕亮着可以更新 UIthis.refreshUI();}六、小结方法返回类型说明getWidth()number屏幕宽度物理像素 pxgetHeight()number屏幕高度物理像素 pxgetOrientation()display.Orientation0竖屏/1横屏/2反向竖/3反向横getDisplayState()display.DisplayState关闭/开启/低电耗/睡眠/VR等这四个方法是开发横竖屏适配和屏幕状态感知的基础。配合后面介绍的屏幕旋转监听addOnScreenOrientationChange可以实现实时响应旋转事件的自适应界面。
