codecamp

像素单位

为开发者提供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. 

  18.         Column() {
  19.           Text("width('220px')")
  20.             .width('220px')
  21.             .height(40)
  22.             .backgroundColor(0xF9CF93)
  23.             .textAlign(TextAlign.Center)
  24.             .fontColor(Color.White)
  25.         }.margin(5)
  26. 

  27.         Column() {
  28.           Text("width('220vp')")
  29.             .width('220vp')
  30.             .height(40)
  31.             .backgroundColor(0xF9CF93)
  32.             .textAlign(TextAlign.Center)
  33.             .fontColor(Color.White)
  34.             .fontSize('12vp')
  35.         }.margin(5)
  36. 

  37.         Column() {
  38.           Text("width('220lpx') designWidth:720")
  39.             .width('220lpx')
  40.             .height(40)
  41.             .backgroundColor(0xF9CF93)
  42.             .textAlign(TextAlign.Center)
  43.             .fontColor(Color.White)
  44.             .fontSize('12vp')
  45.         }.margin(5)
  46. 

  47.         Column() {
  48.           Text("width(vp2px(220) + 'px')")
  49.             .width(vp2px(220) + 'px')
  50.             .height(40)
  51.             .backgroundColor(0xF9CF93)
  52.             .textAlign(TextAlign.Center)
  53.             .fontColor(Color.White)
  54.             .fontSize('12vp')
  55.         }.margin(5)
  56. 

  57.         Column() {
  58.           Text("fontSize('12fp')")
  59.             .width(220)
  60.             .height(40)
  61.             .backgroundColor(0xF9CF93)
  62.             .textAlign(TextAlign.Center)
  63.             .fontColor(Color.White)
  64.             .fontSize('12fp')
  65.         }.margin(5)
  66. 

  67.         Column() {
  68.           Text("width(px2vp(220))")
  69.             .width(px2vp(220))
  70.             .height(40)
  71.             .backgroundColor(0xF9CF93)
  72.             .textAlign(TextAlign.Center)
  73.             .fontColor(Color.White)
  74.             .fontSize('12fp')
  75.         }.margin(5)
  76.       }.width('100%')
  77.     }
  78.   }
  79. }

应用级变量的状态管理
枚举说明
温馨提示
下载编程狮App，免费阅读超1000+编程语言教程
取消
确定
目录

通用事件

通用属性

手势处理

基础组件

容器组件

媒体组件

绘制组件

画布组件

动画

弹窗

生命周期

状态管理

像素

枚举

类型

接口

错误码合集

关闭

 MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }