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%')
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

在这种申明式布局中，直接写‘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."
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

输出之后可以表现为：

使用时直接

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)
1
2
3
4
5
6
7
8
9

为了能让大家更好的学习鸿蒙 (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. ……