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

我现在在做一次开发多端部署的相关内容,但是例如gridrow里面的breakpoint断点只能在这个组件里使用,无法作为条件语句进行判断。有没有什么参数,能直接获取当前设备的宽度?这样就能根据这个宽度判断是大设备还是小设备了。

UI框架
2024-07-01 12:50:08
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
droidzxy

在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%')

 }

}

分享
微博
QQ
微信
回复
2024-07-01 17:00:14
相关问题
如何获取当前设备设备名称
620浏览 • 1回复 待解决
鸿蒙os开放如何获取当前设备ip地址?
3066浏览 • 1回复 待解决
请问如何获取窗口宽度
827浏览 • 1回复 待解决
如何获取主窗口window宽度
809浏览 • 1回复 待解决
求大佬告知如何获取窗口宽度
687浏览 • 1回复 待解决
如何获取文本框里文字宽度
1058浏览 • 1回复 待解决
如何获取Text组件中文字宽度
704浏览 • 1回复 待解决
如何获取当前HAPBundleName
805浏览 • 1回复 待解决
如何获取当前HAPBundleName?
17浏览 • 0回复 待解决
如何获取当前HAP包名
1048浏览 • 1回复 待解决
如何校验当前设备是手机还是平板
6707浏览 • 1回复 已解决
鸿蒙如何获取设备绑定设备ID?
588浏览 • 1回复 待解决
如何获取设备CPU信息
822浏览 • 1回复 待解决
如何获取设备相关信息
663浏览 • 1回复 待解决
ArkUI中如何获取当前UI控件信息
754浏览 • 1回复 待解决
鸿蒙OS如何获取当前手机号
22341浏览 • 1回复 待解决
有没有接口能获取到组件宽度
362浏览 • 1回复 待解决
如何获取手机当前是什么语言?
28浏览 • 1回复 待解决
openHarmony 如何获取当前线程信息?
2128浏览 • 1回复 待解决
如何获取设备唯一标识?
619浏览 • 1回复 待解决
鸿蒙获取当前应用内存
4657浏览 • 1回复 待解决
判断当前设备是手机还是平板
4767浏览 • 1回复 待解决