【HarmonyOS 5】鴻蒙應用px，vp，fp概念詳解

##鴻蒙開發能力 ##HarmonyOS SDK應用服務##鴻蒙金融類應用 （金融理財#

一、前言

目前的鴻蒙開發者，大多數是從前端或者傳統移動端開發方向，轉到鴻蒙應用開發方向。

前端開發同學對于開發范式很熟悉，但是對于工作流程和開發方式是會有不適感，其實移動應用開發與前端開發，最大的區別就在于UI適配和性能優化上了。

今天我們就來分析下鴻蒙中UI適配的規范與小竅門。

二、 鴻蒙中vp、px、fp 是什么？

剛接觸鴻蒙的同學，對于px像素肯定是很熟悉，但是對vp和fp都是一臉懵逼，不知道干嘛用的，可能只是被代碼規范要求或者老人技術指導強調：

“fp用于字體大小，vp用于UI數值，千萬不要在UI里用像素px設置控件?！?/strong>

但是原理卻不是很清楚。

今天就給大家詳細來分析一下其中的緣由。

1. vp

其實vp的概念很簡單，vp是屏幕密度相關像素，根據屏幕像素密度轉換為屏幕物理像素，具有一定的邏輯比例數值。

因為vp在多種設備上不會變形，有一致的視覺體量。當前鴻蒙API接口數值不帶單位時，默認單位都為vp，可見這是官方推薦的數值單位。

2. fp

而fp的概念與vp類似，在鴻蒙系統中也是適用屏幕密度變化，隨系統字體大小設置變化。是專門用于字體像素的單位。

3. px

像素px是我們移動開發的老熟人了。從產品給的原型圖，到UI設計給的效果圖設計圖，單位基本都是px，有時候我們會轉成dp進行比例使用。而在鴻蒙開發中，為了適配多種設備，不同的屏幕像素密度，也有類似于dp的概念，就是綜上所述的vp與fp。

因為在鴻蒙應用開發中，與安卓的現狀相同，需要適配多種機型，不同的折疊手機。并且鴻蒙特性之一就是自由流程多端適配。一套代碼，需要適配多種類設備顯示。所以官方不建議使用屏幕像素單位px進行UI數值的設置。道理也很簡單了，講了很多遍，因為設備的屏幕像素密度不同，如果使用px會導致界面UI布局變形。

綜上所述，在鴻蒙應用開發中，組件數值使用vp，字體大小使用fp。

如何將px轉化為vp或者fp？

首先為什么需要轉化呢？因為設計端源頭，給的是像素單位，目前的設計軟件還給不了vp和fp。所以我們只能將設計圖上的像素進行數值轉化。官方很貼心提供了十分方便的轉化函數：px2vp px2fp

不過最新的api進行了更新，大家需要格外注意。直接使用vp2px/px2vp/fp2px/px2fp/lpx2px/px2lpx可能存在UI上下文不明確的問題，建議使用getUIContext()獲取UIContext實例，再使用UIContext下的px2vp，px2fp等等綁定實例的接口。

代碼示例，例如：

// 建議使用： this.getUIContext().px2vp()
.width(px2vp(200))

三、UI開發規范的參考

1. UI設計人員根據效果圖切圖之前，開發人員需要提前溝通好，確認以下信息：切圖樣式，圖標是否鏤空，圖標是否有白邊，圖標寬高尺寸等。
2. 設計人員切圖提供后，開發人員需要明確切圖是否OK，進行切圖資源的review，方式后續返工，明確符合開發需要。
3. 控件尺寸： 開發人員將px尺寸，使用px2vp(value : number) : number，將px單位的數值轉換為以vp為單位的數值。
4. 字體大小： 開發人員將px尺寸，使用px2fp(value : number) : number，將px單位的數值轉換為以fp為單位的數值。
5. Color 顏色： 盡量使用既有枚舉格式：Color.Black，Color.White等。若沒有，需要UI人員提供標注的16進制顏色。例如：‘#FFFFFF’。
6. UI自測: 應用開發人員自測比對與效果圖的尺寸，驗證完成后進行UI聯調。
7. UI聯調： 開發人員將APP UI提測。設計通過流水線，獲取功能界面截圖，將截圖發給UI，UI聯調比對效果是否有問題。靜態圖通過聯調后，UI會看動態多設備交互效果，驗證是否有問題。

審核編輯 黃宇