OpenHarmony Pixel Unit (eTS)

ArkUIDevelopment framework provided 4 Pixel units for developers to use,分别是： px 、 vp 、 fp 和 lpx ,框架采用vpis the base data unit.它们之间的区别如下表所示：

名称	描述
px	屏幕物理像素单位.
vp	Screen density relative pixel unit,根据屏幕像素密度转换为屏幕物理像素.
fp	字体像素,与vpSimilar applies to screen density changes,Varies with system font size setting.
lpx	Window logical pixel units,lpxThe unit is the actual screen width and the logical width（在 config.json 中配置的 designWidth ）的比值,如配置 designWdith 为 720 时,在实际宽度为 1440 物理像素的屏幕上, 1px 为 2px .

ArkUIThe development framework also provides global methods to convert these different size units to each other,The global method is shown below：

declare function vp2px(value: number): number;declare function px2vp(value: number): number;declare function fp2px(value: number): number;declare function px2fp(value: number): number;declare function lpx2px(value: number): number;declare function px2lpx(value: number): number;

Pixel unit conversion

Other units available withpxThe method of converting units to each other.

接口	描述
vp2px(value : number) : number	将vpThe numerical value of the unit is converted to px为单位的数值.
px2vp(value : number) : number	将pxThe numerical value of the unit is converted to vp为单位的数值.
fp2px(value : number) : number	将fpThe numerical value of the unit is converted to px为单位的数值.
px2fp(value : number) : number	将pxThe numerical value of the unit is converted to fp为单位的数值.
lpx2px(value : number) : number	将lpxThe numerical value of the unit is converted to px为单位的数值.
px2lpx(value : number) : number	将pxThe numerical value of the unit is converted to lpx为单位的数值.

Finally, let's experience it through code

/* * Copyright (c) 2021 JianGuo Device Co., Ltd. * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * *    http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */@[email protected] Example {  build() {    Column() {​        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)      }.width('100%').height("100%").justifyContent(FlexAlign.Center)    }​}​

参考文档

像素单位