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++)); doecho "{"name": "size_$i","value": "$i$vp"}" >> float.jsonif [ $i -lt $size_num ]; thenecho "," >> float.jsonfi
done
if [ $font_size_num -gt 0 ]; thenecho "," >> float.jsonfor ((i=1; i<=$font_size_num; i++)); doecho "{"name": "size_text_$i","value": "$i$fp"}" >> float.jsonif [ $i -lt $font_size_num ]; thenecho "," >> float.jsonfidone
fi
echo "] }" >> float.jsonecho "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