HarmonyOS UI布局单位vp

学习ArkUI时，在Image使用icon,去官方图片库 下载的时候发现图片单位为vp？ pt和px单位我们很熟悉，那什么是vp呢？

download.png

---

官方对于vp的解释为：不管屏幕分辨率是多少，屏幕密度是多少，组件在视觉上呈现的效果是一致的。

vp相比px的优势

vp具体计算公式为：vp = px /（DPI/160）

px就是屏幕真实物理像素值，densityPixels是屏幕密度，是和标准DPI的比例，常见取值有0.75，1.0，1.5，2.0，3.0等，在HarmonyOS中，标准DPI为160，以华为mate 40 pro为例，查询得到的densityPixels=3.5，densityDPI=560。densityDPI就是我们通常所说的系统屏幕密度，densityPixels就是屏幕密度和标准dpi(160)的比率。想要查看真机的dpi，可以调用屏幕属性中的display接口查询。

import { display } from '@kit.ArkUI'; 
 
let displayClass: display.Display | null = null; 
try { 
  displayClass = display.getDefaultDisplaySync(); 
} catch (exception) { 
  console.error('Failed to obtain the default display object. Code: ' + JSON.stringify(exception)); 
}

如果原型图没有提供vp单位的布局，开发者可以根据densityPixel把px转为vp，HarmonyOS也封装了现成的接口px2vp()和vp2px()供开发者直接调用。

---

其实我们在设置宽高的时候，写完整应该是如下的，本质就是vp。

Text('abc')
   // .width(200).height(200)
  .width('200vp').height('200vp')