HarmonyOs学习笔记-布局单位

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/918622.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

操作系统实验 C++实现生产者-消费者问题

实验目的 1、进一步加深理解进程同步的概念 2、加深对进程通信的理解 3、了解Linux下共享内存的使用方法 实验内容 1、按照下面要求,写两个c程序,分别是生产者producer.c以及customer.c 2、一组生产者和一组消费者进程共享一块环形缓冲区 使用共…

Easyexcel(1-注解使用)

文章链接&#xff1a; Easyexcel&#xff08;1-注解使用&#xff09; 版本依赖 <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.3.3</version> </dependency>ExcelProperty 指定…

最新版xAI LLM 模型Grok-2 上线

xAI&#xff01;Grok-2 最新版开启公测&#xff01;”。这是我注册成功的截图&#xff0c;使用国内的邮箱就可以注册使用了&#xff01; Grok API公测与免费体验: Grok API开启公测&#xff0c;提供免费体验128k上下文支持&#xff0c;。Grok-Beta与马斯克: 马斯克庆祝特朗普当…

css数据不固定情况下,循环加不同背景颜色

<template><div><p v-for"(item, index) in items" :key"index" :class"getBackgroundClass(index)">{{ item }}</p></div> </template><script> export default {data() {return {items: [学不会1, …

MySQL的聚簇索引和二级索引

索引按照物理实现方式&#xff0c;索引可以分为 2 种&#xff1a;聚簇&#xff08;聚集&#xff09;和非聚簇&#xff08;非聚集&#xff09;索引。也可以把非聚集索引称为二级索引或者辅助索引。 一.聚簇索引 聚簇索引并不是一种单独的索引类型&#xff0c;而是一种数据存储方…

【Pytorch】torch.nn.functional模块中的非线性激活函数

在使用torch.nn.functional模块时&#xff0c;需要导入包&#xff1a; from torch.nn import functional 以下是常见激活函数的介绍以及对应的代码示例&#xff1a; tanh (双曲正切) 输出范围&#xff1a;(-1, 1) 特点&#xff1a;中心对称&#xff0c;适合处理归一化后的数据…

神经网络11-TFT模型的简单示例

Temporal Fusion Transformer (TFT) 是一种用于时间序列预测的深度学习模型&#xff0c;它结合了Transformer架构的优点和专门为时间序列设计的一些优化技术。TFT尤其擅长处理多变量时间序列数据&#xff0c;并且能够捕捉到长期依赖关系&#xff0c;同时通过自注意力机制有效地…

学习threejs,使用TWEEN插件实现动画

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.PLYLoader PLY模型加…

世界坐标系、相机坐标系、图像物理坐标系、像素平面坐标系

坐标系及其转换在计算机视觉领域占据核心地位。理解如何从一个坐标系转换到另一个坐标系&#xff0c;不仅是理论上的需要&#xff0c;也是实际应用中不可或缺的技能。 一、世界坐标系的定义 世界坐标系是一个全局的坐标系统&#xff0c;用于定义场景中物体的位置。在这个坐标…

03-axios常用的请求方法、axios错误处理

欢迎来到“雪碧聊技术”CSDN博客&#xff01; 在这里&#xff0c;您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者&#xff0c;还是具有一定经验的开发者&#xff0c;相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导&#xff0c;我将…

Redis/Codis性能瓶颈揭秘:网卡软中断的影响与优化

目录 现象回顾 问题剖析 现场分析 解决方案 总结与反思 1.调整中断亲和性&#xff08;IRQ Affinity&#xff09;&#xff1a; 2.RPS&#xff08;Receive Packet Steering&#xff09;和 RFS&#xff08;Receive Flow Steering&#xff09;&#xff1a; 近期&#xff0c;…

openwebui使用

文章目录 1、feature2、安装使用2.1 安装过程2.2 安装好后 1、feature 可以加载多个大模型 同时回复 模型问答: 使用vLLM框架部署模型&#xff0c;再使用Open WebUI直接进行模型问答 多模型支持: 多模型回复比对&#xff08;Qwen2-72B-Instruct, llama3-70b-8192, mixtral-8x7…

汽车资讯新引擎:Spring Boot技术领航

3系统分析 3.1可行性分析 通过对本汽车资讯网站实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本汽车资讯网站采用SSM框架&#xff0c;JAVA作为开发语言&#…

应用系统开发(12) Zync中实现数字相敏检波

在 Xilinx Zynq 系列(如 Zynq-7000 或 Zynq UltraScale+)中实现数字相敏检波(DSP,Digital Synchronous Detection)可以通过硬件(PL部分,FPGA逻辑)和软件(PS部分,ARM Cortex-A 处理器)的协同工作来实现。以下是一个详细的设计方法,包括基本原理和 Zynq 的实现步骤。…

《译文》2024年11月数维杯国际大学生数学建模挑战赛题目

# 赛题正式发布 2024年第十届数维杯国际大学生数学建模挑战赛顺利开赛&#xff0c;竞赛开始时间为北京时间2024年11月15日09:00至北京时间2024年11月19日09:00&#xff0c;共计4天&#xff0c;竞赛题目正式发布&#xff0c;快来一起围观&#xff0c;你认为今年的哪个题目更具有…

apk反编译修改教程系列-----apk应用反编译中AndroidManifest.xml详细代码释义解析 包含各种权限 代码含义【二】

💝💝💝💝在上期博文中解析了一个常规apk中 AndroidManifest.xml的权限以及代码。应粉丝需求。这次解析一个权限较高的apk。这款apk是一个家长管控的应用。需求的各种权限较高。而且通过管控端可以设置控制端的app隐藏与否。 通过博文了解💝💝💝💝 1💝💝…

【UGUI】背包的交互01(道具信息跟随鼠标+道具信息面板显示)

详细程序逻辑过程 初始化物品栏&#xff1a; 在 Awake 方法中&#xff0c;通过标签找到提示框和信息面板。 循环生成10个背包格子&#xff0c;并为每个格子设置图标和名称。 为每个格子添加 UInterMaager232 脚本&#xff0c;以便处理交互事件。 关闭提示框和信息面板&#…

Docker: ubuntu系统下Docker的安装

安装依赖 操作系统版本 Ubuntu Kinetic 22.10Ubuntu Jammy 24.04 (LTS)Ubuntu Jammy 22.04 (LTS)Ubuntu Focal 20.04 (LTS)Ubuntu Bionic 18.04 (LTS) CPU架构支持 ARMx86_64 查看我们的系统版本信息 uname -a通过该命令查得cpu架构是x86_64的&#xff1b; cat /etc/*re…

Nacos 配置中心变更利器:自定义标签灰度

作者&#xff1a;柳遵飞 配置中心被广泛使用 配置中心是 Nacos 的核心功能之一&#xff0c;接入配置中心&#xff0c;可以实现不重启线上应用的情况下动态改变程序的运行期行为&#xff0c;在整个软件生命周期中&#xff0c;可以极大降低了软件构建及部署的成本&#xff0c;提…

基于RK3568J多网口电力可信物联网关解决方案

前言 随着工业物联网的普及和功能越来越强大&#xff0c;边缘计算网关应运而生。 边缘计算有效降低了云端服务器的负载、大大降低了带宽的占用&#xff0c;同时也为本地化的区域自治提供了便利条件。 边缘计算网关&#xff0c;完美地发挥了“边”与“端” 结合优势&#xff0c…