鸿蒙入门04-像素单位

  • 这里我们先要认识一下鸿蒙开发相关的单位
  • 这样方便我们后期对布局的书写
  • 注意 : 鸿蒙应用开发提供了四种像素单位, 框架采用 vp 为基准数据单位

名称

描述

px

屏幕物理像素单位。

vp

屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素

注意 : 当数值不带单位时，默认单位vp。

在实际宽度为 1440 物理像素的屏幕上，1vp 约等于 3px。

fp

字体像素，与 vp 类似适用屏幕密度变化，随系统字体大小设置变化。

lpx

视窗逻辑像素单位，lpx单位为实际屏幕宽度与逻辑宽度（通过designWidth配置）的比值，designWidth 默认值为 720。当 designWidth 为 720 时，在实际宽度为1440 物理像素的屏幕上，1lpx 为 2px 大小。

示例 1 - 默认单位展示

  1. @Entry
  2. @Component
  3. struct Index {
  4.   build() {
  5.     Column() {
  6.       Text('我是一段文本')
  7.         .width(220)
  8.         .height(40)
  9.         .backgroundColor(Color.Orange)
  10.       Text('我是一段文本')
  11.         .width('220vp')
  12.         .height(40)
  13.         .backgroundColor(Color.Pink)
  14.     }
  15.   }
  16. }

不写单位的时候, 默认使用的单位是 vp 

示例 2 - 单位对比展示

  1. @Entry
  2. @Component
  3. struct Index {
  4.   build() {
  5.     Flex({ direction: FlexDirection.Column }) {
  6.       Text('单位是 vp')
  7.         .width(220)
  8.         .height(40)
  9.         .backgroundColor(Color.Orange)
  10.       Text('单位是 px')
  11.         .width('220px')
  12.         .height(40)
  13.         .backgroundColor(Color.Pink)
  14.       Text('单位是 fp')
  15.         .width('220fp')
  16.         .height(40)
  17.         .backgroundColor(Color.Gray)
  18.       Text('单位是 lpx')
  19.         .width('220lpx')
  20.         .height(40)
  21.         .backgroundColor(Color.Brown)
  22.     }
  23.   }
  24. }

PX 单位转换

  • 对于前端开发者来说, 你可能更习惯 px 作为单位
  • 或者有的时候, 你可能需要用到 px 为单位
  • 或者有的时候, 你不得不需要用到 px 作为单位
  • 那么如果我们自己换算的话, 会比较麻烦
  • 鸿蒙应用开发内置也帮我们提供了一些转换函数

接口

描述

vp2px(value : number) : number

将vp单位的数值转换为以px为单位的数值。

px2vp(value : number) : number

将px单位的数值转换为以vp为单位的数值。

fp2px(value : number) : number

将fp单位的数值转换为以px为单位的数值。

px2fp(value : number) : number

将px单位的数值转换为以fp为单位的数值。

lpx2px(value : number) : number

将lpx单位的数值转换为以px为单位的数值。

px2lpx(value : number) : number

将px单位的数值转换为以lpx为单位的数值。

示例 3 - 单位转换

  1. @Entry
  2. @Component
  3. struct Index {
  4.   build() {
  5.     Flex({ direction: FlexDirection.Column }) {
  6.       Text('文字单位是 fp')
  7.         .fontSize('12fp')
  8.         .height(40)
  9.         .backgroundColor(Color.Pink)
  10.       Text('12px 转换为 fp')
  11.         .fontSize(px2fp(12))
  12.         .height(40)
  13.         .backgroundColor(Color.Gray)
  14.     }
  15.   }
  16. }

 文字转换比较明显, 其他转换也是一个意思

注意 : 12px 不是 12fp, 大概是 三分之一 大小

注：本文转载自blog.csdn.net的进阶H5小白的文章"https://blog.csdn.net/qq_42660453/article/details/137866757"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！