學(xué)習(xí)ArkUI時，在Image使用icon,去官方圖片庫 下載的時候發(fā)現(xiàn)圖片單位為vp？ pt和px單位我們很熟悉，那什么是vp呢？

download.png

官方對于vp的解釋為：不管屏幕分辨率是多少，屏幕密度是多少，組件在視覺上呈現(xiàn)的效果是一致的。

vp相比px的優(yōu)勢

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就是我們通常所說的系統(tǒng)屏幕密度，densityPixels就是屏幕密度和標準dpi(160)的比率。想要查看真機的dpi，可以調(diào)用屏幕屬性中的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單位的布局，開發(fā)者可以根據(jù)densityPixel把px轉(zhuǎn)為vp，HarmonyOS也封裝了現(xiàn)成的接口px2vp()和vp2px()供開發(fā)者直接調(diào)用。

其實我們在設(shè)置寬高的時候，寫完整應(yīng)該是如下的，本質(zhì)就是vp。

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