像素单位

2024-01-22 18:27 更新

为开发者提供4种像素单位,框架采用vp为基准数据单位。

名称

描述

px

屏幕物理像素单位。

vp

屏幕密度相关像素,根据屏幕像素密度转换为屏幕物理像素,当数值不带单位时,默认单位vp。在实际宽度为1440物理像素的屏幕上,1vp约等于3px。

fp

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

lpx

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

像素单位转换

提供其他单位与px单位互相转换的方法。

接口

描述

vp2px(value : number) : number

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

从API version 9开始,该接口支持在ArkTS卡片中使用。

px2vp(value : number) : number

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

从API version 9开始,该接口支持在ArkTS卡片中使用。

fp2px(value : number) : number

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

从API version 9开始,该接口支持在ArkTS卡片中使用。

px2fp(value : number) : number

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

从API version 9开始,该接口支持在ArkTS卡片中使用。

lpx2px(value : number) : number

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

从API version 9开始,该接口支持在ArkTS卡片中使用。

px2lpx(value : number) : number

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

从API version 9开始,该接口支持在ArkTS卡片中使用。

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct Example {
  5. build() {
  6. Column() {
  7. Flex({ wrap: FlexWrap.Wrap }) {
  8. Column() {
  9. Text("width(220)")
  10. .width(220)
  11. .height(40)
  12. .backgroundColor(0xF9CF93)
  13. .textAlign(TextAlign.Center)
  14. .fontColor(Color.White)
  15. .fontSize('12vp')
  16. }.margin(5)
  17. Column() {
  18. Text("width('220px')")
  19. .width('220px')
  20. .height(40)
  21. .backgroundColor(0xF9CF93)
  22. .textAlign(TextAlign.Center)
  23. .fontColor(Color.White)
  24. }.margin(5)
  25. Column() {
  26. Text("width('220vp')")
  27. .width('220vp')
  28. .height(40)
  29. .backgroundColor(0xF9CF93)
  30. .textAlign(TextAlign.Center)
  31. .fontColor(Color.White)
  32. .fontSize('12vp')
  33. }.margin(5)
  34. Column() {
  35. Text("width('220lpx') designWidth:720")
  36. .width('220lpx')
  37. .height(40)
  38. .backgroundColor(0xF9CF93)
  39. .textAlign(TextAlign.Center)
  40. .fontColor(Color.White)
  41. .fontSize('12vp')
  42. }.margin(5)
  43. Column() {
  44. Text("width(vp2px(220) + 'px')")
  45. .width(vp2px(220) + 'px')
  46. .height(40)
  47. .backgroundColor(0xF9CF93)
  48. .textAlign(TextAlign.Center)
  49. .fontColor(Color.White)
  50. .fontSize('12vp')
  51. }.margin(5)
  52. Column() {
  53. Text("fontSize('12fp')")
  54. .width(220)
  55. .height(40)
  56. .backgroundColor(0xF9CF93)
  57. .textAlign(TextAlign.Center)
  58. .fontColor(Color.White)
  59. .fontSize('12fp')
  60. }.margin(5)
  61. Column() {
  62. Text("width(px2vp(220))")
  63. .width(px2vp(220))
  64. .height(40)
  65. .backgroundColor(0xF9CF93)
  66. .textAlign(TextAlign.Center)
  67. .fontColor(Color.White)
  68. .fontSize('12fp')
  69. }.margin(5)
  70. }.width('100%')
  71. }
  72. }
  73. }

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号