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

前言

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

下图展示的是被@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()
  }
}

运行效果如下:

在这里插入图片描述

总结

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/246221.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

mysql 与mssql 命令有那些区别

use databasename 进入指定数据库名 命令一致 select databse() 查询当前进入数据库的名 mssql无法使用&#xff0c;mysql正常 mssql 暂无 C知道介绍 以下是MySQL和MSSQL命令的一些区别&#xff1a; 1. 连接数据库的命令不同&#xff1a; - MySQL&#xff1a;…

【Linux】free命令使用

free命令 ​free是指查看当前系统内存的使用情况&#xff0c;它显示系统中剩余及已用的物理内存和交换内存&#xff0c;以及共享内存和被核心使用的缓冲区。 作者 作者&#xff1a;Brian Edmonds。 语法 free [参数] free 命令 -Linux手册页 命令选项及作用 执行令 &am…

HI3559AV100和FPGA 7K690T的PCIE接口调试记录-续

上文https://blog.csdn.net/fzktongyong/article/details/134963814?spm1001.2014.3001.5501 上一篇文中PCIE实测速度和理论计算有较大偏差&#xff0c;经过尝试后有所提升。 1、提升效果 1&#xff09;、RC写操作&#xff0c;实测速度817MB/s&#xff08;410407&…

实验:华为静态路由配置

1.实验目的&#xff1a; 掌握华为路由器和交换机的基本配置方法理解静态路由的原理和作用学习使用vlan和trunk技术划分和连接不同网段能够通过ping命令测试网络连通性和故障排除 2.实验内容&#xff1a; 使用ARI200路由器和S5735交换机搭建如下图所示的网络拓扑在路由器上配…

Elasitcsearch--解决CPU使用率飙升

原文网址&#xff1a;Elasitcsearch--解决CPU使用率飙升_IT利刃出鞘的博客-CSDN博客 简介 本文介绍如何解决ES导致的CPU使用率飙升的问题。 问题描述 线上环境 Elasticsearch CPU 使用率飙升常见问题如下&#xff1a; Elasticsearch 使用线程池来管理并发操作的 CPU 资源。…

【深度学习目标检测】三、基于深度学习的人物摔倒检测(python,yolov8)

深度学习目标检测方法则是利用深度神经网络模型进行目标检测&#xff0c;主要有以下几种&#xff1a; R-CNN系列&#xff1a;包括R-CNN、Fast R-CNN、Faster R-CNN等&#xff0c;通过候选区域法生成候选目标区域&#xff0c;然后使用卷积神经网络提取特征&#xff0c;并通过分类…

商业智能BI和数据可视化的区别

现在市场上有非常多的商业智能BI产品&#xff0c;几乎都在着重宣传其数据可视化功能的强大&#xff0c;给人造成一种商业智能BI就是数据可视化的印象。事实上商业智能BI并不等于数据可视化。要探究商业智能BI和数据可视化的区别&#xff0c;我们先要分别弄清楚这两个概念。 1、…

【华为数据之道学习笔记】5-1支撑非数字原生企业数字化转型的数据底座建设框架

华为通过建设数据底座&#xff0c;将公司内外部的数据汇聚在一起&#xff0c;对数据进行重新组织和联接&#xff0c;让数据有清晰的定义和统一的结构&#xff0c;并在尊重数据安全与隐私的前提下&#xff0c;让数据更易获取&#xff0c;最终打破数据孤岛和垄断。通过数据底座&a…

20231214使用WPS将英文SRT字幕的全大写字符转换为首字母大写的小写字幕

20231214使用WPS将英文SRT字幕的全大写字符转换为首字母大写的小写字幕 2023/12/14 13:16 看英文纪录片&#xff0c;发现英文字母是全部大写。 所以需要整理成为小写的字幕【句子的首字符大小&#xff01;】 https://re.talking.1080p.hdtv.x265.aac.mvgroup.org/index.php?t…

【动态规划】【广度优先搜索】LeetCode:2617 网格图中最少访问的格子数

本文涉及的基础知识点 二分查找算法合集 动态规划 题目 给你一个下标从 0 开始的 m x n 整数矩阵 grid 。你一开始的位置在 左上角 格子 (0, 0) 。 当你在格子 (i, j) 的时候&#xff0c;你可以移动到以下格子之一&#xff1a; 满足 j < k < grid[i][j] j 的格子 (i,…

双向无线功率传输系统MATLAB仿真

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 模型简介&#xff1a; 初级侧转换器通过双向 AC/DC 转换器从电网获取电力&#xff0c;并由直流线电压 Vin 供电&#xff0c;而拾波侧被视为连接到 EV&#xff0c;并由连接到任一存储的单独直流源 Vout 表示或…

ES日志分析在Win系统上的安装和使用

Es日志分析三件套ElasticSearch、Kibana、logstash。 ElasticSearch 下载 官方下载地址 选择自己想要的版本下载即可。这个地方有可能下载会比较慢。可以结合迅雷做下载。 分词器下载 官方分词器下载 如果GIthub加载不出来。可以看看我的这个文章GitHub上不去怎么办&…

[渗透测试学习] Sau - HackTheBox

首先是信息搜集&#xff0c;nmap扫一下 nmap -sV -sC -p- -v 10.10.11.224 发现存在两个端口&#xff0c;55555端口有http服务&#xff0c;访问一下 获得线索request-baskets版本为1.2.1&#xff0c;搜索发现存在漏洞 那么我们试试构造ssrf&#xff0c;create的时候bp抓包 构…

4.11 构建onnx结构模型-Clip

前言 构建onnx方式通常有两种&#xff1a; 1、通过代码转换成onnx结构&#xff0c;比如pytorch —> onnx 2、通过onnx 自定义结点&#xff0c;图&#xff0c;生成onnx结构 本文主要是简单学习和使用两种不同onnx结构&#xff0c; 下面以 Clip 结点进行分析 方式 方法一…

HarmonyOS(ArkTS)基础组件参数 媒体类型讲解

我们这里做了一个空的容器 然后 我们可以这样写 Entry Component struct Index {build() {Row() {Column() {Text("你好")Divider()Button("点击")}.width(100%)}.height(100%)} }这里 我们分别使用了三个组件 Text文本组件 Divider分割线组件 Button按钮…

简说vue-router原理

vue-router原理 hash模式 实现原理 改变描点监听描点变化 history模式 实现原理 改变url监听url变化 abstracthash 和 history 模式有什么区别&#xff1f; url 不一样原理不同 其他总结扩展 history 出现404错误 vue-router原理 vue-router是vue项目的重要组成部分&#x…

STM32的基本定时器注意点

本文介绍了STM32基本定时器3个重要的寄存器PSC、ARR、CNT&#xff0c;以及缓冲机制和计数细节。 基本定时器的框图 预分频器寄存器(TIMx_PSC)可以在运行过程中修改它的数值&#xff0c;新的预分频数值将在下一个更新事件时起作用。因为更新事件发生时&#xff0c;会把 TIMx_PS…

Flink 流处理流程 API详解

流处理API的衍变 Storm&#xff1a;TopologyBuilder构建图的工具&#xff0c;然后往图中添加节点&#xff0c;指定节点与节点之间的有向边是什么。构建完成后就可以将这个图提交到远程的集群或者本地的集群运行。 Flink&#xff1a;不同之处是面向数据本身的&#xff0c;会把D…

java实现冒泡排序及其动图演示

冒泡排序是一种简单的排序算法&#xff0c;它重复地遍历要排序的数列&#xff0c;一次比较两个元素&#xff0c;如果它们的顺序错误就把它们交换过来。重复这个过程直到整个数列都是按照从小到大的顺序排列。 具体步骤如下&#xff1a; 比较相邻的两个元素&#xff0c;如果前…

三层交换的原理

一.三层交换技术 1.什么是三层交换机 要实现vlan间通信&#xff0c;就需要路由&#xff0c;解决办法要么是二层交换机加路由器形成单臂路由&#xff0c;要么就是直接使用三层交换机。 ①什么是单臂路由&#xff1a; ②单臂路由实现不同vlan间通信的原理&#xff1a; 路由器…