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)
        ```