OpenHarmony应用开发-自定义组件的生命周期/像素单位/类型定义

素年锦时静待君丶

发布于 2023-4-17 18:39

浏览

0收藏

版本：v3.2 Release

自定义组件的生命周期

自定义组件的生命周期回调函数用于通知用户该自定义组件的生命周期，这些回调函数是私有的，在运行时由开发框架在特定的时间进行调用，不能从应用程序中手动调用这些回调函数。

说明：
允许在生命周期函数中使用Promise和异步回调函数，比如网络资源获取，定时器设置等；

aboutToAppear

aboutToAppear?(): void

aboutToAppear函数在创建自定义组件的新实例后，在执行其build()函数之前执行。允许在aboutToAppear函数中改变状态变量，更改将在后续执行build()函数中生效。

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

aboutToDisappear

aboutToDisappear?(): void

aboutToDisappear函数在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。

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

onPageShow

onPageShow?(): void

页面每次显示时触发一次，包括路由过程、应用进入前台等场景，仅@Entry装饰的自定义组件生效。

onPageHide

onPageHide?(): void

页面每次隐藏时触发一次，包括路由过程、应用进入前后台等场景，仅@Entry装饰的自定义组件生效。

onBackPress

onBackPress?(): void

当用户点击返回按钮时触发，仅@Entry装饰的自定义组件生效。返回true表示页面自己处理返回逻辑，不进行页面路由，返回false表示使用默认的路由返回逻辑。不设置返回值按照false处理。

// xxx.ets
@Entry
@Component
struct IndexComponent {
  @State textColor: Color = Color.Black;

  onPageShow() {
    this.textColor = Color.Blue;
    console.info('IndexComponent onPageShow');
  }

  onPageHide() {
    this.textColor = Color.Transparent;
    console.info('IndexComponent onPageHide');
  }

  onBackPress() {
    this.textColor = Color.Red;
    console.info('IndexComponent onBackPress');
  }

  build() {
    Column() {
      Text('Hello World')
        .fontColor(this.textColor)
        .fontSize(30)
        .margin(30)
    }.width('100%')
  }
}

OpenHarmony应用开发-自定义组件的生命周期/像素单位/类型定义-鸿蒙开发者社区

onLayout⁹⁺

onLayout?(children: Array<LayoutChild>, constraint: ConstraintSizeOptions): void

框架会在自定义组件布局时，将该自定义组件的子节点信息和自身的尺寸范围通过onLayout传递给该自定义组件。不允许在onLayout函数中改变状态变量。

参数：

参数名	类型	说明
children	Array<LayoutChild>	子组件布局信息。
constraint	ConstraintSizeOptions	父组件constraint信息。

onMeasure⁹⁺

onMeasure?(children: Array<LayoutChild>, constraint: ConstraintSizeOptions): void

框架会在自定义组件确定尺寸时，将该自定义组件的子节点信息和自身的尺寸范围通过onMeasure传递给该自定义组件。不允许在onMeasure函数中改变状态变量。

参数：

参数名	类型	说明
children	Array<LayoutChild>	子组件布局信息。
constraint	ConstraintSizeOptions	父组件constraint信息。

LayoutChild⁹⁺

子组件布局信息。

参数	参数类型	描述
name	string	子组件名称。
id	string	子组件id。
constraint	ConstraintSizeOptions	子组件约束尺寸。
borderInfo	LayoutBorderInfo	子组件border信息。
position	Position	子组件位置坐标。
measure	(childConstraint:) => void	调用此方法对子组件的尺寸范围进行限制。
layout	(LayoutInfo： LayoutInfo) => void	调用此方法对子组件的位置信息进行限制。

LayoutBorderInfo⁹⁺

子组件border信息。

参数	参数类型	描述
borderWidth	EdgeWidths	边框宽度类型，用于描述组件边框不同方向的宽度。
margin	Margin	外边距类型，用于描述组件不同方向的外边距。
padding	Padding	内边距类型，用于描述组件不同方向的内边距。

LayoutInfo⁹⁺

子组件layout信息。

参数	参数类型	描述
position	Position	子组件位置坐标。
constraint	ConstraintSizeOptions	子组件约束尺寸。

// xxx.ets
@Entry
@Component
struct Index {
  build() {
    Column() {
      CustomLayout() {
        ForEach([1, 2, 3], (index) => {
          Text('Sub' + index)
            .fontSize(30)
            .borderWidth(2)
        })
      }
    }
  }
}


@Component
struct CustomLayout {
  @BuilderParam builder: () => {};

  onLayout(children: Array<LayoutChild>, constraint: ConstraintSizeOptions) {
    let pos = 0;
    children.forEach((child) => {
      child.layout({ position: { x: pos, y: pos }, constraint: constraint })
      pos += 100;
    })
  }

  onMeasure(children: Array<LayoutChild>, constraint: ConstraintSizeOptions) {
    let size = 100;
    children.forEach((child) => {
      child.measure({ minHeight: size, minWidth: size, maxWidth: size, maxHeight: size })
      size += 50;
    })
  }

  build() {
    this.builder()
  }
}

OpenHarmony应用开发-自定义组件的生命周期/像素单位/类型定义-鸿蒙开发者社区

像素单位

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

名称	描述
px	屏幕物理像素单位。
vp	屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素，当数值不带单位时，默认单位vp。
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卡片中使用。

示例

// 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%')
    }
  }
}

OpenHarmony应用开发-自定义组件的生命周期/像素单位/类型定义-鸿蒙开发者社区

类型说明

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格式颜色，支持rgb。
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’。当前只支持’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。

文章转载自：https://docs.openharmony.cn/pages/v3.2/zh-cn/application-dev/reference/arkui-ts/ts-types.md/

分类

标签

已于2023-4-17 18:39:12修改

51CTO

51CTO博客

51CTO学堂

OpenHarmony应用开发-自定义组件的生命周期/像素单位/类型定义

自定义组件的生命周期

aboutToAppear

aboutToDisappear

onPageShow

onPageHide

onBackPress

onLayout9+

onMeasure9+

LayoutChild9+

LayoutBorderInfo9+

LayoutInfo9+

像素单位

像素单位转换

示例

类型说明

Resource

Length

ResourceStr

Padding

Margin

EdgeWidths9+

BorderRadiuses9+

EdgeColors9+

EdgeStyles9+

Offset

ResourceColor

LengthConstrain

Font

Area8+

Position8+

ConstraintSizeOptions

SizeOptions

BorderOptions

ColorFilter9+

CustomBuilder8+

目录

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

onLayout⁹⁺

onMeasure⁹⁺

LayoutChild⁹⁺

LayoutBorderInfo⁹⁺

LayoutInfo⁹⁺

EdgeWidths⁹⁺

BorderRadiuses⁹⁺

EdgeColors⁹⁺

EdgeStyles⁹⁺

Area⁸⁺

Position⁸⁺

ColorFilter⁹⁺

CustomBuilder⁸⁺