鸿蒙基础开发实战-（ArkTS）像素转换_鸿蒙px转length

像素单位转换API的使用

主要功能包括：

1. 展示了不同像素单位的使用。
2. 展示了像素单位转换相关API的使用。

像素单位介绍页面

在像素单位介绍页面，介绍了系统像素单位的概念，并在页面中为Text组件的宽度属性设置不同的像素单位，fp像素单位则设置为Text组件的字体大小。

// IntroductionPage.ets
// 设置Text组件的宽度为200px
Text('200px')
  .textAlign(TextAlign.Center)
  .backgroundColor($r('app.color.blue_background'))
  .height($r('app.float.value_height'))
  .width('200px')
...
// 设置Text组件的宽度为200vp
Text('200vp')
  .textAlign(TextAlign.Center)
  .backgroundColor($r('app.color.blue_background'))
  .height($r('app.float.value_height'))
  .width('200vp')
...
// 设置Text组件的宽度为200lpx
Text('200lpx')
  .textAlign(TextAlign.Center)
  .backgroundColor($r('app.color.blue_background'))
  .height($r('app.float.value_height'))
  .width('200lpx')
...
// 分别设置Text的字体大小为14fp, 24fp
Column() {
  Text('这是一段为14fp的文字')
    .fontSize('14fp')
  ...
  Text('这是一段为24fp的文字')
    .fontSize('24fp')
  ...
}
...
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

为组件设置具体的宽高时，可以不加“vp”(系统默认单位为vp）。 为文字设置字体大小时可以不加“fp”（系统默认为fp）。

像素转换页面

在像素转换页面，通过使用像素转换API，实现不同像素单位之间的相互转换功能。

// ConversionPage.ets
// vp转换为px
Row()
  .blueStyle()
  .width(vp2px(60))
// px转换为vp
Row()
  .blueStyle()
  .width(px2vp(60))
// fp转换为px
Row()
  .blueStyle()
  .width(fp2px(60))
// px转换为fp
Row()
  .blueStyle()
  .width(px2fp(60))
// lpx转换为px
Row()
  .blueStyle()
  .width(lpx2px(60))
// px转换为lpx
Row()
  .blueStyle()
  .width(px2lpx(60))
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

本篇主要介绍像素单位的基本知识与像素单位转换API的使用。通过像素转换案例，向开发者讲解了如何使用像素单位设置组件的尺寸、字体的大小以及不同像素单位之间的转换方法。更多鸿蒙4.0的学习，可以前往主页学习或前往《鸿蒙4.0开发学习目录》鸿蒙的技术分布如下：

高清完整版，可前往主页保存↓↓↓：

最终效果图：