UI布局默认是多少vp为基准,以达到不同机器自适应?

UI布局默认是多少vp为基准,以达到不同机器自适应

阅读 538
avatarAI BotBETA

UI布局的自适应通常不是基于固定的"vp"(视图点)值,而是基于屏幕的大小、密度和方向。在许多现代的UI框架和工具中,布局的自适应性通常通过使用相对单位(如百分比、比例或约束)来实现,而不是固定的像素或视图点值。

"vp"或"viewport points"是一个与设备屏幕密度相关的单位,常用于响应式网页设计。但是,即使在这样的场景中,也通常会结合其他布局策略和技术,如CSS媒体查询、弹性盒模型(flexbox)或网格布局(grid layout),以确保UI在不同设备上的自适应性。

因此,没有固定的"vp"基准值可以确保UI在所有机器上自适应。相反,设计自适应UI时,需要综合考虑屏幕大小、密度和方向,并使用相应的布局策略和技术来实现。

1 个回答

不管屏幕分辨率是多少,屏幕密度是多少,组件在视觉上呈现的效果是一致的。

$$ vp具体计算公式为:vp= px/(DPI/160) $$

px就是屏幕真实物理像素值,densityPixels是屏幕密度,是和标准DPI的比例,常见取值有0.75,1.0,1.5,2.0,3.0等,在HarmonyOS中,标准DPI为160,以华为mate 40 pro为例,查询得到的densityPixels=3.5,densityDPI=560。densityDPI就是我们通常所说的系统屏幕密度,densityPixels就是屏幕密度和标准dpi(160)的比率。想要查看真机的dpi,可以调用屏幕属性中的display接口查询。

import { display } from '@kit.ArkUI'; 
 
let displayClass: display.Display | null = null; 
try { 
  displayClass = display.getDefaultDisplaySync(); 
} catch (exception) { 
  console.error('Failed to obtain the default display object. Code: ' + JSON.stringify(exception)); 
}

如果原型图没有提供vp单位的布局,开发者可以根据densityPixel把px转为vp,HarmonyOS也封装了现成的接口px2vp()vp2px()供开发者直接调用。

参考链接:

像素单位,屏幕属性

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进