HarmonyOs学习笔记-布局单位

news/2024/11/19 17:41:03/

鸿蒙开发中布局存在很多单位

鸿蒙的默认单位是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是保证比例是一致的,也就是不同屏幕上您看到的是等比放大或缩小。


http://www.ppmy.cn/news/1548279.html

相关文章

药香代码:Spring Boot实现中药实验管理

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统,它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等,非常…

git-.git目录解析

目录 .git目录下的文件信息 logs:记录各个分支日志记录 refs:记录本地分支、远程分支、tag标签最新commitID config: 配置信息,详细内容解析看下面介绍HEAD: 工作空间当前所在分支 inde文件: 它又常被称为“暂存区”或“缓存区”。这个文件…

gitlab容器的迁移(部署)并配置自动备份

gitlab容器的迁移(部署)并配置自动备份 本文背景为从Ubuntu服务器上迁移gitlab容器到windows并备份,若要直接拉取镜直接安装配置可直接从第二小标题参考 1、原Ubuntu的gitlab容器制作为镜像 2.1 将运行的容器制为镜像 #镜像:i…

C#设计模式(12)——享元模式(Flyweight Pattern)

前言 享元模式通过共享对象来减少内存使用和提高性能。 代码 public abstract class Flyweight {public abstract void Control(); }public class ComputerFlyweight : Flyweight {private string _operator;public ComputerFlyweight(string name){_operator name;}public o…

第十六届蓝桥杯模拟赛(第一期)-c++/c

前面填空参考https://blog.csdn.net/2301_76891851/article/details/143448411 后面大题code&#xff1a; 停车场停车 #include <bits/stdc.h> #define int long long using namespace std; int tmp; signed main() {int n;cin>>n;if(n<15)cout<<"…

威胁驱动的网络安全方法论

摘要 目前的网络安全风险管理实践很大程度上是由合规性要求驱动的&#xff0c;这使得公司/组织不得不在安全控制和漏洞上投入人力/物力。&#xff08;风险管理涉及多个方面&#xff0c;包括资产、威胁、漏洞和控制&#xff0c;并根据事故发生的可能性及造成的影响进行评估。威…

dnaMethyAge包学习笔记

1.introduction 许多对甲基化年龄进行计算的文章都是采用网站实现计算的&#xff0c;能够实现对甲基化年龄的计算的R包相对比较少&#xff0c;其中应用最广的是dnaMethyAge包。作者本想寻找能够计算Grimage和Grimage2的R包&#xff0c;奈何没有寻找到&#xff0c;因此只能记录一…

css uniapp背景图宽度固定高度自适应可以重复

page {height: 100%;background-image: url(https://onlinekc.a.hlidc.cn/uploads/20241115/350f94aaf493d05625a7ddbc86c7804e.png);background-repeat: repeat;background-size: contain;} 如果不要重复 把background-repeat: repeat;替换background-repeat: no-repeat;