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

##鸿蒙开发能力 ##HarmonyOS SDK 应用服务 ##鸿蒙金融类应用 （金融理财 #

一、前言

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

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

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

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

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

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

但是原理却不是很清楚。

image.png

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

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

image.png

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