像素單位

2024-01-22 18:27 更新

為開發(fā)者提供4種像素單位，框架采用vp為基準(zhǔn)數(shù)據(jù)單位。

名稱

描述

px

屏幕物理像素單位。

vp

屏幕密度相關(guān)像素，根據(jù)屏幕像素密度轉(zhuǎn)換為屏幕物理像素，當(dāng)數(shù)值不帶單位時(shí)，默認(rèn)單位vp。在實(shí)際寬度為1440物理像素的屏幕上，1vp約等于3px。

fp

字體像素，與vp類似適用屏幕密度變化，隨系統(tǒng)字體大小設(shè)置變化。

lpx

視窗邏輯像素單位，lpx單位為實(shí)際屏幕寬度與邏輯寬度（通過designWidth配置）的比值，designWidth默認(rèn)值為720。當(dāng)designWidth為720時(shí)，在實(shí)際寬度為1440物理像素的屏幕上，1lpx為2px大小。

像素單位轉(zhuǎn)換

提供其他單位與px單位互相轉(zhuǎn)換的方法。

接口

描述

vp2px(value : number) : number

將vp單位的數(shù)值轉(zhuǎn)換為以px為單位的數(shù)值。

從API version 9開始，該接口支持在ArkTS卡片中使用。

px2vp(value : number) : number

將px單位的數(shù)值轉(zhuǎn)換為以vp為單位的數(shù)值。

從API version 9開始，該接口支持在ArkTS卡片中使用。

fp2px(value : number) : number

將fp單位的數(shù)值轉(zhuǎn)換為以px為單位的數(shù)值。

從API version 9開始，該接口支持在ArkTS卡片中使用。

px2fp(value : number) : number

將px單位的數(shù)值轉(zhuǎn)換為以fp為單位的數(shù)值。

從API version 9開始，該接口支持在ArkTS卡片中使用。

lpx2px(value : number) : number

將lpx單位的數(shù)值轉(zhuǎn)換為以px為單位的數(shù)值。

從API version 9開始，該接口支持在ArkTS卡片中使用。

px2lpx(value : number) : number

將px單位的數(shù)值轉(zhuǎn)換為以lpx為單位的數(shù)值。

從API version 9開始，該接口支持在ArkTS卡片中使用。

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct Example {
  5.   build() {
  6.     Column() {
  7.       Flex({ wrap: FlexWrap.Wrap }) {
  8.         Column() {
  9.           Text("width(220)")
  10.             .width(220)
  11.             .height(40)
  12.             .backgroundColor(0xF9CF93)
  13.             .textAlign(TextAlign.Center)
  14.             .fontColor(Color.White)
  15.             .fontSize('12vp')
  16.         }.margin(5)
  17. 

  18.         Column() {
  19.           Text("width('220px')")
  20.             .width('220px')
  21.             .height(40)
  22.             .backgroundColor(0xF9CF93)
  23.             .textAlign(TextAlign.Center)
  24.             .fontColor(Color.White)
  25.         }.margin(5)
  26. 

  27.         Column() {
  28.           Text("width('220vp')")
  29.             .width('220vp')
  30.             .height(40)
  31.             .backgroundColor(0xF9CF93)
  32.             .textAlign(TextAlign.Center)
  33.             .fontColor(Color.White)
  34.             .fontSize('12vp')
  35.         }.margin(5)
  36. 

  37.         Column() {
  38.           Text("width('220lpx') designWidth:720")
  39.             .width('220lpx')
  40.             .height(40)
  41.             .backgroundColor(0xF9CF93)
  42.             .textAlign(TextAlign.Center)
  43.             .fontColor(Color.White)
  44.             .fontSize('12vp')
  45.         }.margin(5)
  46. 

  47.         Column() {
  48.           Text("width(vp2px(220) + 'px')")
  49.             .width(vp2px(220) + 'px')
  50.             .height(40)
  51.             .backgroundColor(0xF9CF93)
  52.             .textAlign(TextAlign.Center)
  53.             .fontColor(Color.White)
  54.             .fontSize('12vp')
  55.         }.margin(5)
  56. 

  57.         Column() {
  58.           Text("fontSize('12fp')")
  59.             .width(220)
  60.             .height(40)
  61.             .backgroundColor(0xF9CF93)
  62.             .textAlign(TextAlign.Center)
  63.             .fontColor(Color.White)
  64.             .fontSize('12fp')
  65.         }.margin(5)
  66. 

  67.         Column() {
  68.           Text("width(px2vp(220))")
  69.             .width(px2vp(220))
  70.             .height(40)
  71.             .backgroundColor(0xF9CF93)
  72.             .textAlign(TextAlign.Center)
  73.             .fontColor(Color.White)
  74.             .fontSize('12fp')
  75.         }.margin(5)
  76.       }.width('100%')
  77.     }
  78.   }
  79. }

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)