如何获取当前设备的宽度？

在UIAbility中获取并存储为全局变量，然后在页面中获取全局变量。

1.在UIAbility的​​onWindowStageCreate​​生命周期回调中，通过​​窗口​​对象获取启动时的应用窗口宽度并注册回调函数监听窗口尺寸变化。将窗口尺寸的长度单位​​由px换算为vp​​后，即可基于前文中介绍的规则得到当前断点值，此时可以使用​​状态变量​​记录当前的断点值方便后续使用。

​

// MainAbility.ts

import window from '@ohos.window'

import display from '@ohos.display'

import UIAbility from '@ohos.app.ability.UIAbility'

export default class MainAbility extends UIAbility {

 private windowObj?: window.Window

 private curBp: string = ''

 //...

 // 根据当前窗口尺寸更新断点

 private updateBreakpoint(windowWidth: number) :void{

   // 将长度的单位由px换算为vp

   let windowWidthVp = windowWidth / display.getDefaultDisplaySync().densityPixels

   let newBp: string = ''

   if (windowWidthVp < 320) {

     newBp = 'xs'

   } else if (windowWidthVp < 600) {

     newBp = 'sm'

   } else if (windowWidthVp < 840) {

     newBp = 'md'

   } else {

     newBp = 'lg'

   }

   if (this.curBp !== newBp) {

     this.curBp = newBp

     // 使用状态变量记录当前断点值

     AppStorage.setOrCreate('currentBreakpoint', this.curBp)

   }

 }

 onWindowStageCreate(windowStage: window.WindowStage) :void{

   windowStage.getMainWindow().then((windowObj) => {

     this.windowObj = windowObj

     // 获取应用启动时的窗口尺寸

     this.updateBreakpoint(windowObj.getWindowProperties().windowRect.width)

     // 注册回调函数，监听窗口尺寸变化

     windowObj.on('windowSizeChange', (windowSize)=>{

       this.updateBreakpoint(windowSize.width)

     })

   });

  // ...

 }

 //...

}

2.​在页面中，获取及使用当前的断点。

​

​@Entry

@Component

struct Index {

 @StorageProp('currentBreakpoint') curBp: string = 'sm'

 build() {

   Flex({justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center}) {

     Text(this.curBp).fontSize(50).fontWeight(FontWeight.Medium)

   }

   .width('100%')

   .height('100%')

 }

}