Harmony 应用开发之size 脚本

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

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

Harmony的像素单位

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

再看下他的使用方式:

scss 复制代码
// 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

用脚本生成

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

bash 复制代码
#!/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."

输出之后可以表现为:

使用时直接

scss 复制代码
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)
        ```
相关推荐
爬虫程序猿12 分钟前
利用爬虫按关键字搜索淘宝商品实战指南
android·爬虫
顾北川_野40 分钟前
Android ttyS2无法打开该如何配置 + ttyS0和ttyS1可以
android·fpga开发
前端世界2 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
wzj_what_why_how4 小时前
Android网络层架构:统一错误处理的问题分析到解决方案与设计实现
android·架构
千里马学框架4 小时前
User手机上如何抓取界面的布局uiautomatorviewer
android·智能手机·aosp·uiautomator·布局抓取·user版本
阿巴~阿巴~4 小时前
操作系统核心技术剖析:从Android驱动模型到鸿蒙微内核的国产化实践
android·华为·harmonyos
iMerryou5 小时前
鸿蒙的动态渐变背景实现
harmonyos
hsx6665 小时前
使用 MaterialShapeDrawable 自定义各种形状的 View
android
用户2018792831676 小时前
滑动城堡的奇妙管家 ——ViewPager故事
android
用户2018792831676 小时前
📜 童话:魔法卷轴与 ScrollView 的奥秘
android