鸿蒙开发中布局存在很多单位
鸿蒙的默认单位是vp
下方先展示一下在RrkTsUI中我们应该怎么书写,然后讲一下各大单位具体的含义。
Text("这是一个文本, 用默认单位进行展示,也就是vp")
.width(100)
.height(100);//此段代码与上方代码是一样的,上方代码默认单位就是vp
Text("这是一个文本, 用默认单位进行展示,也就是vp")
.width("100vp")
.height("100vp");Text("这是一个文本,用px单位来表示")
.width("100px")
.height("100px");
px
px代表物理像素。落实到硬件为屏幕上的一个展示单元,也就是像素点。随着时代发展,就像我们的手机,电脑,最早的时候甚至肉眼就能看出来像素点,但是随着硬件器材升级,手机越来越高端,屏幕也越来越好,也变得越来越细腻,有时候拿放大镜仔细看才能看出来像素点。因为这个像素点变得越来越小,这样相同的物理面积里就会放下更多的物理像素点,屏幕的展现就因此越来越细腻。
下图为模拟粗糙像素点与细腻像素点的区别:
当我们给一个文字或者方框的单位为px时, 假设是 10px,就意味着是10像素点, 那么在比较糙的屏幕上,也就是像素点比较大的,通常是价格比较便宜的屏幕上,10像素点累积起来的长度,要比好的屏幕,也就是像素点比较小,表现比较细腻的屏幕上, 长度要更长。原因就是,这个像素点一个比较大,一个比较小。
所以如果以px为单位,则实际长宽大小,是要根据具体的物理屏幕而定的。 不容易统一。
vp
vp是华为为Harmony系统定制的,一种默认的布局单位。是一种逻辑像素。它是为了解决我们上方介绍的px所带来的问题。就是相同px的控件, 在不同的屏幕上展示大小不统一的问题。言外之意,就是跟上述问题反着来,只要我们给定了宽高之后,那么,控件的展示,即使在不同的屏幕上,无论粗糙的屏幕还是细腻的屏幕,起码展示的肉眼可见的大小,是一样的!也就是尽量由上图形式,优化为下图形式:
那么它的解决思路是什么呢?其实跟Android系统的ps单位异曲同工。其核心的点在于,鸿蒙能拿到屏幕的真实密度,然后用公式,将单位值转换为真实的像素点值。 就是为了确保观感一致,做了计算。
公式为:
在实际宽度为1440的物理像素屏幕上, 1vp ≈ 3px 。 与Android的ps几乎一致。
fp
用来设置字体大小的单位, 实际上期原理和vp这个单位理解是一致的,但是有一个好处是,当未来手机的系统字体调大调小的时候(比如老年人比较倾向于把字体调大一些),这种情况下,我们app里面的字体也会跟着系统字体相应的调大调小。这时候,我们的字体大小单位为fp的时候,就会有这个能力。非常方便灵活。
lpx
lpx,是一种逻辑像素单位。它的意思是说, 无论用户用的手机,平板屏幕是什么样的, 像素点,大也好,小也罢。 刨去这个概念, 只把用户的屏幕,横向,纵向,分割为多少等分,例如,1020 x 1980 ,你的屏幕只要是比例跟这个尺寸相符,那么无论实际物理尺寸是大还是小,都可以按照这个量去切分。
例如一个粗糙的屏幕,本身就是横向1020 x 纵向 1980 个像素点,这样排布, 而一个比较细腻的屏幕,横向是 2040 X 纵向3960 个像素这样排布。 如果一个方框的高度设置为 100VP, 那么粗糙的屏幕宽度占据的像素点是 100个, 而后边那个比较细腻的像素点占据的是 200个, 总之是保证了物理尺寸上比例的大小展示,是一致的就可以了。
lpx与vp而言,不同的是, 观感不一样。 vp是保证控件在不同屏幕上观感大小一致。 但lpx是保证比例是一致的,也就是不同屏幕上您看到的是等比放大或缩小。