HarmonyOS 鸿蒙Next长度单位lpx与vp并存原因及使用场景区别

发布于 1周前 作者 vueper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next长度单位lpx与vp并存原因及使用场景区别 长度为啥同时存在lpx 和 vp 两种单位呢？使用的场景有什么区别？

Harmonyos Next教程
12 回复
  1. lpx (视窗逻辑像素):

lpx是一种基于视窗逻辑宽度的单位，它允许开发者按照一个固定的逻辑宽度（如默认值720lpx）来进行布局设计，然后在不同物理宽度的屏幕上按比例缩放布局，确保应用界面在不同尺寸的屏幕上都能保持良好的展示效果和一致性。

  1. vp (屏幕密度相关像素):

vp是根据屏幕像素密度计算出来的单位，它考虑到了不同设备的像素密度差异，使得在高像素密度的屏幕上，同样大小的vp单位所代表的实际物理像素会更多，从而保证了图形和文字在不同像素密度的屏幕上看起来大小相似。

结合实际工作场景，lpx更适用于整体布局的适配，确保界面元素随着屏幕尺寸的变化而伸缩；而vp则更适合用于那些需要与屏幕像素密度紧密相关的元素，比如背景图或图标，确保在各种屏幕分辨率下细节清晰度不变。

例如：设计图给了首页、登录页、隐私协议页。我这边首页和登录页会用lpx单位，也就是做成等比缩放的保持和设计图一致，而隐私协议页用vp单位，也就是大屏手机看到的字更多。

另外在微信小程序中使用的rpx也是类似的逻辑像素单位，但其基准值是固定的750rpx对应屏幕宽度，鸿蒙OS的lpx可以根据designWidth配置进行调整，增强了灵活性，以满足不同项目的设计需求。这样，在响应式设计中，UI设计师只需产出一套设计稿，开发人员就可以利用这些像素单位轻松地实现跨设备的适配。

更多关于HarmonyOS 鸿蒙Next长度单位lpx与vp并存原因及使用场景区别的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


好滴，谢谢您，

这是修改后的基本信息部分：

  • 姓名: 张三
  • 年龄: 30
  • 职位: 软件工程师

联系方式:

技能:

  • Python
  • Java
  • C++

项目经验:

  • 项目一: 学生管理系统
    • 描述: 开发一个学生信息管理平台
    • 负责内容: 后端开发
  • 项目二: 在线商城
    • 描述: 构建一个电子商务网站
    • 负责内容: 前端设计

lpx 是不是类似小程序的 rpx 单位?

有要学HarmonyOS AI的同学吗，联系我：https://www.itying.com/goods-1206.html，

可能是，现在我觉得单位有点混乱。

推荐使用lpx吧，这样只需要修改配置里面的宽度尺寸以后，就可以直接使用ui设计的参数了。vp这个概念实际上来源于android的dp，是一个屏幕密度值，用来解决不同比例和屏幕像素的差异。

两者间的区别就是

  1. lpx如果你的UI设计尺寸是宽度是375，那么你可以直接在配置里面写入设计尺寸是375，然后UI上标注多少尺寸你就写多少。会按照宽度进行等比缩放。

  2. vp虽然也做到了自适应，但是其计算方式是根据屏幕斜边来计算。这也导致在UI还原时遇到的最大问题就是很难按照设计图进行快速的编写代码。并且相同的vp，在不同机型上展示的效果是有问题的。即虽然进行了自适应，但是因为计算方式是按照斜边，所以在水平方向上的宽度在各机型展示的实际宽度百分比是不一致，导致UI还原上存在问题。

现在的问题是在运算过程中精度丢失了，因为鸿蒙的API很多只支持VP。

个人理解：

vp 是以480px为基准计算的相对像素；lpx是以720px为基准计算的相对像素；现阶段API中多数接口是以vp作单位为主；lpx估计是较新的单位，但API中似乎没怎么用；但如今手机分辨率720p已经相当于下限了，因此搞个lpx估计是为了更好针对新屏幕，取名【视窗逻辑像素单位】似乎偏向UI设计时使用；

使用场景：

  • UI组件的属性如.width()等用数值作参数时默认以 vp为单位，如果明示单位，在字符串中数值后面可跟vp,也可跟lpx，两者转换成的物理像素值会有1.5倍差距；

  • API中对象如Area等承载组件区域的对象中的成员变量对应的数值单位是 vp，如在组件的 .onAreaChange()事件中回调返回的newValue.width值就是以vp为单位；

故多数API对象或方法中返回的和组件尺寸相关的变量、对象以vp为取值单位；而lpx可用来给组件属性赋值，可在module.json5中配置designWidth等，用于和UI设计的像素转换可能比vp相对直观些，但是：）lpx在使用中有不少bug，需要等待新版本修复，所以。。。目前还是以vp为主吧。

因为大多数组件支持的都是vp，感觉这个lpx使用比较麻烦。

如果使用vp来做适配的话，750px的设计稿 100*100px的UI组件应该如何计算成对应的vp来还原设计稿，是直接使用暴力的除以2的操作么，

系统有vp, px, fp, lpx的内置转换方法，直接调用转换一下即可，方法名很直接，如 vp2px(vp_value),

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/ts-pixel-units-0000001478341189-V2

HarmonyOS（鸿蒙）中，长度单位lpx（Logical Pixel）与vp（Viewport Pixel）并存的原因主要在于它们各自适应不同的布局和显示需求。

lpx是鸿蒙系统为了适配不同屏幕尺寸和分辨率而设计的一种逻辑像素单位。它确保了在不同设备上，使用lpx作为单位的界面元素能够保持相对一致的视觉大小。lpx单位使得开发者能够更容易地创建响应式布局，无需担心设备间的差异。

vp单位则与视口（Viewport）相关，它代表了当前显示区域的大小。vp单位通常用于需要根据屏幕实际大小进行动态调整的布局场景。例如，在创建全屏应用或需要精确控制元素相对于屏幕大小的位置时，vp单位会更加适用。

使用场景区别：

  • 当需要确保界面元素在不同设备上保持一致的视觉大小时，使用lpx单位。
  • 当需要根据当前设备的屏幕大小进行动态布局调整时，使用vp单位。

这两种单位的并存为开发者提供了更多的灵活性和选择，以适应不同的设计和开发需求。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html，

回到顶部