HarmonyOS API：全局UI方法

joytrian

发布于 2023-3-27 17:51

浏览

0收藏

版本：v3.1 Beta

像素单位

更新时间: 2023-02-17 09:19

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

名称	描述
px	屏幕物理像素单位。
vp	屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素，当数值不带单位时，默认单位vp。
fp	字体像素，与vp类似适用屏幕密度变化，随系统字体大小设置变化。
lpx	视窗逻辑像素单位，lpx单位为实际屏幕宽度与逻辑宽度（通过designWidth配置）的比值，designWidth默认值为720。当designWidth为720时，在实际宽度为1440物理像素的屏幕上，1lpx为2px大小。

像素单位转换

提供其他单位与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为单位的数值。

示例

// xxx.ets
@Entry
@Component
struct Example {
  build() {
    Column() {
      Flex({ wrap: FlexWrap.Wrap }) {
        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%')
    }
  }
}

HarmonyOS API：全局UI方法-鸿蒙开发者社区

类型定义

更新时间: 2023-02-17 09:19

Resource

资源引用类型，用于设置组件属性的值。

可以通过$r或者$rawfile创建Resource类型对象，不可以修改Resource中的各属性的值。

$r('belonging.type.name')
belonging：系统资源或者应用资源，相应的取值为'sys'和'app'；
type：资源类型，支持'color'、'float'、'string'、'media'等；
name：资源名称，在资源定义时确定。
$rawfile('filename')
filename：工程中resources/rawfile目录下的文件名称。
说明：在引用资源类型时，注意其数据类型要与属性方法本身的类型一致，例如某个属性方法支持设置string | Resource，那么在使用Resource引用类型时，其数据类型也应当为string。

Length

长度类型，用于描述尺寸单位。

类型	说明
string	需要显式指定像素单位，如'10px'，也可设置百分比字符串，如'100%'。
number	默认单位vp。
Resource	资源引用类型，引入系统资源或者应用资源中的尺寸。

ResourceStr

字符串类型，用于描述字符串入参可以使用的类型。

类型	说明
string	字符串类型。
Resource	资源引用类型，引入系统资源或者应用资源中的字符串。

Padding

内边距类型，用于描述组件不同方向的内边距。

名称	类型	必填	说明
top	Length	否	上内边距，组件内元素距组件顶部的尺寸。
right	Length	否	右内边距，组件内元素距组件右边界的尺寸。
bottom	Length	否	下内边距，组件内元素距组件底部的尺寸。
left	Length	否	左内边距，组件内元素距组件左边界的尺寸。

Margin

外边距类型，用于描述组件不同方向的外边距。

名称	类型	必填	说明
top	Length	否	上外边距，组件顶部距组件外元素的尺寸。
right	Length	否	右外边距，组件右边界距组件外元素的尺寸。
bottom	Length	否	下外边距，组件底部距组件外元素的尺寸。
left	Length	否	坐外边距，组件左边界距组件外元素的尺寸。

EdgeWidths⁹⁺

边框宽度类型，用于描述组件边框不同方向的宽度。

名称	类型	必填	说明
top	Length	否	组件上边框宽度。
right	Length	否	组件右边框宽度。
bottom	Length	否	组件下边框宽度。
left	Length	否	组件左边框宽度。

BorderRadiuses⁹⁺

圆角类型，用于描述组件边框圆角半径。

名称	类型	必填	说明
topLeft	Length	否	组件左上角圆角半径。
topRight	Length	否	组件右上角圆角半径。
bottomLeft	Length	否	组件左下角圆角半径。
bottomRight	Length	否	组件右下角圆角半径。

EdgeColors⁹⁺

边框颜色，用于描述组件边框四条边的颜色。

名称	类型	必填	说明
top	ResourceColor	否	组件上边框颜色。
right	ResourceColor	否	组件右边框颜色。
bottom	ResourceColor	否	组件下边框颜色。
left	ResourceColor	否	组件左边框颜色。

EdgeStyles⁹⁺

边框样式，用于描述组件边框四条边的样式。

名称	类型	必填	说明
top	BorderStyle	否	组件上边框样式。
right	BorderStyle	否	组件右边框样式。
bottom	BorderStyle	否	组件下边框样式。
left	BorderStyle	否	组件左边框样式。

Offset

相对布局完成位置坐标偏移量。

名称	类型	必填	说明
dx	Length	是	水平方向偏移量。
dy	Length	是	竖直方向偏移量。

ResourceColor

颜色类型，用于描述资源颜色类型。

类型	说明
Color	颜色枚举值。
number	HEX格式颜色。
string	rgb或者rgba格式颜色。
Resource	使用引入资源的方式，引入系统资源或者应用资源中的颜色。

LengthConstrain

长度约束，用于对组件最大、最小长度做限制。

名称	类型	必填	说明
minLength	Length	是	组件最小长度。
maxLength	Length	是	组件最大长度。

Font

设置文本样式。

名称	类型	必填	说明
size	Length	否	设置文本尺寸，Length为number类型时，使用fp单位。不支持设置百分比字符串。
weight	FontWeight \| number \| string	否	设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。
family	string \| Resource	否	设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。
style	FontStyle	否	设置文本的字体样式。

Area⁸⁺

区域类型，用于存储元素所占区域信息

名称	类型	说明
width	Length	目标元素的宽度，作为返回值时，类型为number，单位vp。
height	Length	目标元素的高度，作为返回值时，类型为number，单位vp。
position	Position	目标元素左上角相对父元素左上角的位置。
globalPosition	Position	目标元素左上角相对页面左上角的位置。

Position⁸⁺

位置类型，用于表示一个坐标点。

名称	类型	必填	说明
x	Length	否	x轴坐标，作为返回值时，类型为number，单位vp。
y	Length	否	y轴坐标，作为返回值时，类型为number，单位vp。

ConstraintSizeOptions

设置约束尺寸，组件布局时，进行尺寸范围限制。

名称	类型	必填	说明
minWidth	Length	否	元素最小宽度。
maxWidth	Length	否	元素最大宽度。
minHeight	Length	否	元素最小高度。
maxHeight	Length	否	元素最大高度。

SizeOptions

设置宽高尺寸。

名称	类型	必填	说明
width	Length	否	元素宽度。
height	Length	否	元素高度。

BorderOptions

边框属性集合，用于描述边框相关信息。

名称	类型	必填	说明
width	Length \| EdgeWidths⁹⁺	否	边框宽度。
color	ResourceColor \| EdgeColors⁹⁺	否	边框颜色。
radius	Length \| BorderRadiuses⁹⁺	否	边框圆角半径。
style	BorderStyle \| EdgeStyles⁹⁺	否	边框样式。

ColorFilter⁹⁺

创建具有4*5矩阵的颜色过滤器。

名称	类型	必填	描述
constructor	number[]	是	创建具有45矩阵的颜色过滤器, 入参为[mn]位于m行和n列中矩阵值, 矩阵是行优先的。

CustomBuilder⁸⁺

组件属性方法参数可使用CustomBuilder类型来自定义UI描述。

名称	类型定义	描述
CustomBuilder	() => any	该方法类型必须使用@Builder装饰器修饰。具体用法见@Builder。

GridContainer

更新时间: 2023-02-17 09:19

纵向排布栅格布局容器，仅在栅格布局场景中使用。

说明

从API Version 9 开始，该组件不再维护，推荐使用新组件GridCol、GridRow。
该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

可以包含子组件。

接口

GridContainer(value?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: number | string, margin?: number | string})

参数：

参数名	类型	必填	说明
columns	number \| 'auto'	否	设置当前布局总列数。默认值：'auto'
sizeType	SizeType	否	选用设备宽度类型。默认值：SizeType.Auto
gutter	number \| string	否	栅格布局列间距，不支持百分比。
margin	number \| string	否	栅格布局两侧间距，不支持百分比。

SizeType枚举说明

名称	描述
XS	最小宽度类型设备。
SM	小宽度类型设备。
MD	中等宽度类型设备。
LG	大宽度类型设备。
Auto	根据设备类型进行选择。

属性

支持通用属性和Column组件的属性方法。

事件

支持通用事件。

示例

// xxx.ets
@Entry
@Component
struct GridContainerExample {
  @State sizeType: SizeType = SizeType.XS

  build() {
    Column({ space: 5 }) {
      GridContainer({ columns: 12, sizeType: this.sizeType, gutter: 10, margin: 20 }) {
        Row() {
          Text('1')
            .useSizeType({
              xs: { span: 6, offset: 0 },
              sm: { span: 2, offset: 0 },
              md: { span: 2, offset: 0 },
              lg: { span: 2, offset: 0 }
            })
            .height(50).backgroundColor(0x4682B4).textAlign(TextAlign.Center)
          Text('2')
            .useSizeType({
              xs: { span: 2, offset: 6 },
              sm: { span: 6, offset: 2 },
              md: { span: 2, offset: 2 },
              lg: { span: 2, offset: 2 }
            })
            .height(50).backgroundColor(0x00BFFF).textAlign(TextAlign.Center)
          Text('3')
            .useSizeType({
              xs: { span: 2, offset: 8 },
              sm: { span: 2, offset: 8 },
              md: { span: 6, offset: 4 },
              lg: { span: 2, offset: 4 }
            })
            .height(50).backgroundColor(0x4682B4).textAlign(TextAlign.Center)
          Text('4')
            .useSizeType({
              xs: { span: 2, offset: 10 },
              sm: { span: 2, offset: 10 },
              md: { span: 2, offset: 10 },
              lg: { span: 6, offset: 6 }
            })
            .height(50).backgroundColor(0x00BFFF).textAlign(TextAlign.Center)
        }
      }.width('90%')

      Text('Click Simulate to change the device width').fontSize(9).width('90%').fontColor(0xCCCCCC)
      Row() {
        Button('XS')
          .onClick(() => {
            this.sizeType = SizeType.XS
          }).backgroundColor(0x317aff)
        Button('SM')
          .onClick(() => {
            this.sizeType = SizeType.SM
          }).backgroundColor(0x317aff)
        Button('MD')
          .onClick(() => {
            this.sizeType = SizeType.MD
          }).backgroundColor(0x317aff)
        Button('LG')
          .onClick(() => {
            this.sizeType = SizeType.LG
          }).backgroundColor(0x317aff)
      }
    }.width('100%').margin({ top: 5 })
  }
}

HarmonyOS API：全局UI方法-鸿蒙开发者社区

文章转载自：https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-types-0000001477981241-V3?catalogVersion=V3

分类

卡片开发

IDE

标签

HarmonyOS API

已于2023-3-27 17:51:35修改

51CTO

51CTO博客

51CTO学堂

HarmonyOS API：全局UI方法

像素单位

像素单位转换

示例

类型定义

Resource

Length

ResourceStr

Padding

Margin

EdgeWidths⁹⁺

BorderRadiuses⁹⁺

EdgeColors⁹⁺

EdgeStyles⁹⁺

Offset

ResourceColor

LengthConstrain

Font

Area⁸⁺

Position⁸⁺

ConstraintSizeOptions

SizeOptions

BorderOptions

ColorFilter⁹⁺

CustomBuilder⁸⁺

GridContainer

子组件

接口

SizeType枚举说明

属性

事件

示例

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

HarmonyOS API：全局UI方法

像素单位

像素单位转换

示例

类型定义

Resource

Length

ResourceStr

Padding

Margin

EdgeWidths9+

BorderRadiuses9+

EdgeColors9+

EdgeStyles9+

Offset

ResourceColor

LengthConstrain

Font

Area8+

Position8+

ConstraintSizeOptions

SizeOptions

BorderOptions

ColorFilter9+

CustomBuilder8+

GridContainer

子组件

接口

SizeType枚举说明

属性

事件

示例

目录

订阅鸿蒙技术特刊，精选内容抢先看

EdgeWidths⁹⁺

BorderRadiuses⁹⁺

EdgeColors⁹⁺

EdgeStyles⁹⁺

Area⁸⁺

Position⁸⁺

ColorFilter⁹⁺

CustomBuilder⁸⁺