HarmonyOS(十三)——详解自定义组件的生命周期

发布时间:2024年01月24日

前言

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

下图展示的是被@Entry装饰的组件生命周期:
在这里插入图片描述

今天根据上面的流程图,我们从自定义组件的初始创建、重新渲染和删除来一一详细解释。

说明:允许在生命周期函数中使用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装饰的自定义组件生效。

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

onLayout9+

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

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

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

参数说明:

参数名称参数类型参数说明
childrenArray<LayoutChild>子组件布局信息。
constraintConstraintSizeOptions父组件constraint信息。

onMeasure9+

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

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

注意??:从API version 9开始,该接口支持在ArkTS卡片中使用。
参数说明:

参数名称参数类型参数说明
childrenArray<LayoutChild>子组件布局信息。
constraintConstraintSizeOptions父组件constraint信息。

LayoutChild9+

子组件布局信息。

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

参数名称参数类型描述
namestring子组件名称。
idstring子组件id。
constraintConstraintSizeOptions子组件约束尺寸。
borderInfoLayoutBorderInfo子组件border信息。
positionPosition子组件位置坐标。
measure(childConstraint: ConstraintSizeOptions) => void调用此方法对子组件的尺寸范围进行限制。
layout(LayoutInfo: LayoutInfo) => void调用此方法对子组件的位置信息进行限制。

LayoutBorderInfo9+

子组件border信息。

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

参数名称参数类型描述
borderWidthEdgeWidths边框宽度类型,用于描述组件边框不同方向的宽度。
marginMargin外边距类型,用于描述组件不同方向的外边距。
paddingPadding内边距类型,用于描述组件不同方向的内边距。

LayoutInfo9+

子组件layout信息。

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

参数名称参数类型描述
positionPosition子组件位置坐标。
constraintConstraintSizeOptions子组件约束尺寸。
@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()
  }
}

运行效果如下:

在这里插入图片描述

总结

自定义组件的生命周期回调函数用于通知用户该自定义组件的生命周期,这些回调函数是私有的,在运行时由开发框架在特定的时间进行调用,不能从应用程序中手动调用这些回调函数。合理的掌握和使用组件的生命周期函数可以帮助我们更好开发和实现需求功能。

文章来源:https://blog.csdn.net/ljx1400052550/article/details/135006309
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。