【HarmonyOS 5】鸿蒙应用px，vp，fp概念详解

一、前言

目前的鸿蒙开发者，大多数是从前端或者传统移动端开发方向，转到鸿蒙应用开发方向。

前端开发同学对于开发范式很熟悉，但是对于工作流程和开发方式是会有不适感，其实移动应用开发与前端开发，最大的区别就在于UI适配和性能优化上了。

今天我们就来分析下鸿蒙中UI适配的规范与小窍门。

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

刚接触鸿蒙的同学，对于px像素肯定是很熟悉，但是对vp和fp都是一脸懵逼，不知道干嘛用的，可能只是被代码规范要求或者老人技术指导强调：

“fp用于字体大小，vp用于UI数值，千万不要在UI里用像素px设置控件。”

但是原理却不是很清楚。

今天就给大家详细来分析一下其中的缘由。

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会看动态多设备交互效果，验证是否有问题。