Harmony 应用开发之size 脚本

作者:麦客奥德彪

在应用开发中,最终呈现在用户面前的UI,是用户能否继续使用应用的强力依据之一,在之前的开发中,Android 屏幕碎片化严重,所以出现了很多尺寸适配方案。 最小宽适配、百分比适配等等。

还有一个点,就是为了能在项目中统一管理尺寸,我们一般会在values下生成一个dimens.xml 文件,然后将尺寸和文字大小进行统一管理,提供阅读性。

Harmony的像素单位

并且提供了像素转换的方式

再看下他的使用方式:

// xxx.ets
@Entry
@Component
struct Example {
  build() {
    Column() {
      Flex({ wrap: FlexWrap.Wrap }) {
        Column() {
          Text("width(220)")
            .width(220)
            .height(40)
            .backgroundColor(0xF9CF93)
            .textAlign(TextAlign.Center)
            .fontColor(Color.White)
            .fontSize('12vp')
        }.margin(5)

        Column() {
          Text("width('220px')")
            .width('220px')
            .height(40)
            .backgroundColor(0xF9CF93)
            .textAlign(TextAlign.Center)
            .fontColor(Color.White)
        }.margin(5)

        Column() {
          Text("width('220vp')")
            .width('220vp')
            .height(40)
            .backgroundColor(0xF9CF93)
            .textAlign(TextAlign.Center)
            .fontColor(Color.White)
            .fontSize('12vp')
        }.margin(5)

        Column() {
          Text("width('220lpx') designWidth:720")
            .width('220lpx')
            .height(40)
            .backgroundColor(0xF9CF93)
            .textAlign(TextAlign.Center)
            .fontColor(Color.White)
            .fontSize('12vp')
        }.margin(5)

        Column() {
          Text("width(vp2px(220) + 'px')")
            .width(vp2px(220) + 'px')
            .height(40)
            .backgroundColor(0xF9CF93)
            .textAlign(TextAlign.Center)
            .fontColor(Color.White)
            .fontSize('12vp')
        }.margin(5)

        Column() {
          Text("fontSize('12fp')")
            .width(220)
            .height(40)
            .backgroundColor(0xF9CF93)
            .textAlign(TextAlign.Center)
            .fontColor(Color.White)
            .fontSize('12fp')
        }.margin(5)

        Column() {
          Text("width(px2vp(220))")
            .width(px2vp(220))
            .height(40)
            .backgroundColor(0xF9CF93)
            .textAlign(TextAlign.Center)
            .fontColor(Color.White)
            .fontSize('12fp')
        }.margin(5)
      }.width('100%')
    }
  }
}

在这种申明式布局中,直接写‘12vp’ 更加不好管理了。

官方推荐的写法是在

float.json 文件中进行管理

没有单位时默认vp

用脚本生成

使用脚本直接生成常用的尺寸,

#!/bin/bash
vp="vp"
fp="fp"
size_num=300
font_size_num=100
# Generate JSON for size_1 to size_300 and save to float.json
echo "{ "float": [" > float.json
for ((i=1; i<=$size_num; i++)); do
    echo "{
      "name": "size_$i",
      "value": "$i$vp"
    }" >> float.json
    if [ $i -lt $size_num ]; then
        echo "," >> float.json
    fi
done
if [ $font_size_num -gt 0 ]; then
    echo "," >> float.json
    for ((i=1; i<=$font_size_num; i++)); do
        echo "{
          "name": "size_text_$i",
          "value": "$i$fp"
        }" >> float.json
        if [ $i -lt $font_size_num ]; then
            echo "," >> float.json
        fi
    done
fi
echo "] }" >> float.json

echo "float.json file has been generated."

输出之后可以表现为:

使用时直接

Column() {
          Text("fontSize($r('app.float.size_1'))")
            .width(220)
            .height(40)
            .backgroundColor(0xF9CF93)
            .textAlign(TextAlign.Center)
            .fontColor(Color.White)
            .fontSize($r('app.float.size_text_12'))
        }.margin(5)

为了能让大家更好的学习鸿蒙 (Harmony OS) 开发技术,这边特意整理了《鸿蒙 (Harmony OS)开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05

《鸿蒙 (Harmony OS)开发学习手册》

入门必看

  1. 应用开发导读(ArkTS)
  2. 应用开发导读(Java)

HarmonyOS 概念:https://qr21.cn/FV7h05

  1. 系统定义
  2. 技术架构
  3. 技术特性
  4. 系统安全

如何快速入门

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. 构建第一个JS应用
  4. ……

开发基础知识:https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发:https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ……

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

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

相关文章

【论文】Bao:一种用于现代多核嵌入式系统的轻型静态分区管理程序

Bao&#xff1a;一种用于现代多核嵌入式系统的轻型静态分区管理程序 个人学习过程中 Bao Hypervisor 论文翻译&#xff08;借助翻译工具个人校对&#xff09;&#xff0c;仅供学习使用&#xff0c;由于个人对一些技术专有名词不够熟悉&#xff0c;翻译不当的地方欢迎指出 论文地…

windows11下安装Tensor RT,并在conda虚拟环境下使用

建议仔细读一读NVIDIA官方出的安装教程&#xff0c;里面有windows、linux等安装教程&#xff0c;非常详细&#xff0c;这里再做一下简要总结。 TensorRT主要有三种安装模式、五种安装方式 毫无疑问&#xff0c;在windows系统中&#xff0c;我们只能选择zip安装。 安装tensorR…

【软件测试】技术不好?不学这几招你怎么跳槽?

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、软件测试面试环…

java springboot测试类鉴定虚拟MVC请求 返回内容与预期值是否相同

上文 java springboot测试类鉴定虚拟MVC运行值与预期值是否相同 中 我们验证了它HTTP的返回状态 简单说 校验了他 是否成功的状态 这次 我们来不对得到的内容 我们 直接改写测试类代码如下 package com.example.webdom;import org.junit.jupiter.api.Test; import org.springf…

AIGC 实践——七鱼客服机器人业务指标波动分析

智能客服机器人的业务指标&#xff0c;最常见的就是解决率&#xff0c;解决率的高低直接关系到客户采购机器人的价值。解决率很高&#xff0c;客户可以省下很多成本开销&#xff0c;如果解决率很低&#xff0c;那么就没有必要采购这个客服机器人。所以&#xff0c;智能客服机器…

PyTorch深度学习实战——人体姿态估计

PyTorch深度学习实战——人体姿态估计 0. 前言1. 人体姿态估计2. 使用 Detectron2 实现人体姿态估计相关链接 0. 前言 我们已经学习了如何执行实例分割&#xff0c;在本节中&#xff0c;我们将了解如何利用 Detectron2 对图像执行人体姿态估计&#xff0c;检测图像中人物的身体…

Atlassian Confluence 路径遍历和命令执行漏洞 (CVE-2019-3396)

漏洞描述 Confluence 是由澳大利亚软件公司 Atlassian 开发的基于 Web 的企业 wiki。 Atlassian Confluence 6.14.2 版本之前存在一个未经授权的目录遍历漏洞&#xff0c;攻击者可以使用 Velocity 模板注入读取任意文件或执行任意命令。 漏洞环境及漏洞利用 启动docker环境…

GPRS电表和4G电表有哪些区别?

随着科技的不断进步&#xff0c;通信技术在智能电网中的应用越来越广泛。其中&#xff0c;GPRS电表和4G电表作为两种常见的远程智能抄表方案&#xff0c;为广大用户带来了便捷的用电管理体验。然而&#xff0c;这两种电表在技术特点、应用场景等方面存在一定差异。下面&#xf…

Authing 入选《 2023 年央国企信创应用与实践研究报告》优秀服务商

11 月 21 日&#xff0c;Authing 身份云作为国内唯一事件驱动云原生身份平台入选《 2023 年央国企信创应用与实践研究报告》优秀服务商&#xff0c;该报告由第一新声研究院合伙人、Gartner 前高管合伙人/副总裁李长华牵头指导&#xff0c;第一新声创始人兼 CEO 组织&#xff0c…

华中科技大学李松课题组,利用机器学习预测多孔材料水吸附等温线

多孔材料的水吸附等温线是一个非常重要的参数&#xff0c;但这一参数的获得并不容易。这是因为多孔材料种类过多、结构多元&#xff0c;通过实验和计算的方式获得水吸附等温线数据成本过高&#xff0c;耗时过长。 华中科技大学的李松课题组&#xff0c;建立了一个两步机器学习模…

深度学习模型训练计算量的估算

深度学习模型训练计算量的估算 方法1&#xff1a;基于网络架构和批处理数量计算算术运算次数前向传递计算和常见层的参数数量全连接层&#xff08;Fully connected layer&#xff09;参数浮点数计算量 CNN参数浮点数计算量 转置CNN参数浮点数计算量 RNN参数浮点数计算量 GRU参数…

java--static修饰成员方法

1.成员方法的分类 ①类方法&#xff1a;有static修饰的成员方法&#xff0c;属于类 ②实例方法&#xff1a;无static修饰的成员方法&#xff0c;属于对象。 2.成员方法的执行原理 解析&#xff1a; 第一行代码&#xff1a;扫描class包名&#xff0c;在方法区生成一个Test.cl…

如何用Python爬取全国高校数据?

前言 Python是一门强大的编程语言&#xff0c;它可以用于爬取互联网上的各种数据。在这篇文章中&#xff0c;我们将学习如何使用Python爬取全国高校数据&#xff0c;并使用代理IP进行爬取。 本文主要分为以下几个部分&#xff1a; 数据来源及需求安装依赖包及导入模块爬取全…

G320E是一种低荣声、固定频率的电荷泵型DC/DC转换器

G320E 低噪声电荷泵DC/DC转换器 产品概述&#xff1a; G320E是一种低荣声、固定频率的电荷泵型DC/DC转换器&#xff0c;在输入电压范围在2.7V到5.0V的情况下&#xff0c;该器件可以产生5V的输出电压&#xff0c;最大输出电流达到300mA.G320E外部元件少&#xff0c;非常适合于…

MySQL-01-MySQL基础架构

1-MySQL逻辑结构 如果能在头脑中构建一幅MySQL各组件之间如何协同工作的架构图&#xff0c;有助于深入理解MySQL服务器。下图展示了MySQL的逻辑架构图。 MySQL逻辑架构整体分为三层&#xff0c;最上层为客户端层&#xff0c;并非MySQL所独有&#xff0c;诸如&#xff1a;连接处…

掌握视频色彩变幻特效,让你的影片更具魅力!

如果你是一名视频制作爱好者或专业人士&#xff0c;那么一定会知道在视频中添加特效的重要性。今天&#xff0c;我们将向你介绍一种令人惊叹的特效技巧——色彩变幻。通过掌握这个技巧&#xff0c;你将能够为你的影片增添独特的视觉效果&#xff0c;吸引观众的注意力。 首先第一…

亚信安慧AntDB MTK数据同步工具之数据稽核

数据稽核是一种用于确保表数据准确性和一致性的重要方法&#xff0c;它涉及到检查数据的完整性、一致性、有效性和合法性&#xff0c;以及与预期规范的匹配程度等多个方面。随着大数据时代的到来&#xff0c;通过有效的数据稽核&#xff0c;组织可以提高决策的准确性和效率&…

cefsharp119.4.30(cef119.4.3,Chromium119.0.6045.159)版本升级体验支持H264及其他多个H264版本

Cefsharp119.4.30,cef119.4.3,Chromium119.0.6045.159 此更新包括一个高优先级安全更新 This update includes a high priority security update. 说明:此版本119.4.3支持H264视频播放(需要联系我),其他版本。.NETFramework 4.6.2 NuGet Gallery | CefSharp.WinForms 119.…

IT支持团队的绩效指标和最佳实践

一名员工在远程时因笔记本问题寻求IT支持&#xff0c;尽管他们多次尝试排除故障&#xff0c;但由于缺乏专业知识&#xff0c;最终还是无法访问工作所需的应用程序。这时&#xff0c;他们需要一名专业的 IT 技术人员来指导他们&#xff0c;但他们只能等待有人注意到并回应他们的…