文章目录
- 一、ArkTS @Component 自定义组件生命周期
- 1、自定义组件生命周期
- 2、aboutToAppear 函数执行时机和作用
- 3、aboutToDisappear 函数执行时机和作用
- 4、代码示例
- 二、ArkTS @Entry 页面生命周期
- 1、@Entry 页面生命周期
- 2、onBackPress 和 onPageHide 回调函数无关联
- 三、代码示例 - @Entry 页面生命周期 + @Component 自定义组件生命周期
- 1、代码示例 - @Component 自定义组件生命周期
- 2、代码示例 - @Entry 页面生命周期
- 3、进入页面后的效果
- 4、屏幕熄灭
- 5、屏幕点亮
- 6、按下 Home 键
- 7、Home 键返回
- 8、回退键退出应用
参考文档 : <HarmonyOS第一课>ArkTS开发语言介绍
一、ArkTS @Component 自定义组件生命周期
1、自定义组件生命周期
ArkTS 的 @Component 自定义组件 生命周期 从创建 到 销毁的全过程 , 如下图所示 :
- 首先 , 创建 自定义组件 ;
- 然后 , 在将要显示到页面上时 , 回调 自定义组件 的 aboutToAppear() 函数 ;
- 再后 , 显示完毕将要在页面上消失时 , 回调 自定义组件 的 aboutToDisappear() 函数 ;
- 最后 , 销毁 自定义组件 ;
2、aboutToAppear 函数执行时机和作用
aboutToAppear() 函数 在 创建自定义组件 之后 , 在 build() 声明 UI 函数 之前执行 ;
aboutToAppear() 函数 中 通常 用于 初始化 将要在 UI 中展示的数据 , 或 申请 系统资源 , 在后续执行的 build 函数中 , 使用 初始化的数据 或 申请的系统资源 ;
3、aboutToDisappear 函数执行时机和作用
aboutToDisappear() 函数 在 build() 声明 UI 函数 之后 , 在 自定义组件销毁 之前 , 进行调用 ;
aboutToAppear() 函数 中 通常 用于 销毁 在 UI 中展示的数据 , 或 释放不再申请的 系统资源 ;
4、代码示例
在自定义组件 MyComponent 中 , 重写 aboutToAppear 和 aboutToDisappear 函数 , 然后在页面中使用该自定义组件 ;
import hilog from '@ohos.hilog'@Component
export struct MyComponent {// 创建后 , build 之前回调aboutToAppear(){console.log("aboutToAppear")}// 自定义子组件build() {Column({ space: 20 }) { // 设置子组件间距为10Text('Text1').fontSize(20).backgroundColor(Color.Green)Text('Text2').fontSize(20).backgroundColor(Color.Yellow)Text('Text3').fontSize(20).backgroundColor(Color.Gray)}.width('50%') // 设置 Row 的宽度.height('50%') // 设置 Row 的高度.backgroundColor(Color.Pink).alignItems(HorizontalAlign.Center) // 水平居中.justifyContent(FlexAlign.Center) // 垂直居中}// build 之后 , 销毁前回调aboutToDisappear() {console.log("aboutToDisappear")}
}
在页面中 , 使用该自定义组件 :
// 导入外部自定义子组件
import {MyComponent} from '../view/MyComponent';@Entry
@Component
struct Example {build() {// 必须使用布局组件包括子组件Column(){// 自定义子组件MyComponent();}}
}
运行效果 :
上述代码在本博客资源中可以下载 ;
二、ArkTS @Entry 页面生命周期
1、@Entry 页面生命周期
使用 @Entry 修饰自定义组件 , 就是将该自定义组件设置为 默认页面入口 ;
页面入口组件 , 会在 自定义组件 的 生命周期回调函数
- aboutToAppear() 函数 : 自定义组件创建后 , 调用 build 函数之前 , 回调该函数 ;
- aboutToDisappear() 函数 : 自定义组件 调用 build 函数显示 之后 , 销毁之前 , 回调该函数 ;
的 基础上 , 额外提供了另外 3 个生命周期函数 :
- onPageShow() 函数 : 进入该界面时 , 应用进入前台时 , 页面显示 , 回调该函数 ;
- onBackPress() 函数 : 用户点击 回退键 , 回调该函数 ;
- 注意 : 此时不会 回调 onPageHide 函数 ;
- onPageHide() 函数 : 用户点击 Hone 键 , 页面进入后台 , 页面隐藏 , 回调该函数 ;
- 注意 : 此时不会 回调 onBackPress 函数 ;
2、onBackPress 和 onPageHide 回调函数无关联
下图是 HarmonyOS 官方教程中的图 , onBackPress 和 onPageHide 函数的回调 , 经测试没有先后关系 , 是两种不同操作 对应的 不同的回调 ;
- 只有在用户点击回退键时 , 才会回调 onBackPress 函数 ;
- 只有在用户点击 Home 键或界面进入后台时 , 才会回调 onPageHide 函数 ;
三、代码示例 - @Entry 页面生命周期 + @Component 自定义组件生命周期
1、代码示例 - @Component 自定义组件生命周期
自定义组件代码示例 :
import hilog from '@ohos.hilog'@Component
export struct MyComponent {// 创建后 , build 之前回调aboutToAppear(){console.log("HSL MyComponent aboutToAppear")}// 自定义子组件build() {Column({ space: 20 }) { // 设置子组件间距为10Text('Text1').fontSize(20).backgroundColor(Color.Green)Text('Text2').fontSize(20).backgroundColor(Color.Yellow)Text('Text3').fontSize(20).backgroundColor(Color.Gray)}.width('50%') // 设置 Row 的宽度.height('50%') // 设置 Row 的高度.backgroundColor(Color.Pink).alignItems(HorizontalAlign.Center) // 水平居中.justifyContent(FlexAlign.Center) // 垂直居中}// build 之后 , 销毁前回调aboutToDisappear() {console.log("HSL MyComponent aboutToDisappear")}
}
2、代码示例 - @Entry 页面生命周期
页面代码示例 :
// 导入外部自定义子组件
import {MyComponent} from '../view/MyComponent';@Entry
@Component
struct Example {aboutToAppear(){console.log("HSL Example aboutToAppear")}onPageShow() {console.log("HSL Example onPageShow")}onBackPress() {console.log("HSL Example onBackPress")}build() {// 必须使用布局组件包括子组件Column(){// 自定义子组件MyComponent();}}onPageHide() {console.log("HSL Example onPageHide")}aboutToDisappear(){console.log("HSL Example aboutToDisappear")}}
3、进入页面后的效果
这里使用真机进行调试 , 进入页面后会打印如下日志 :
I HSL Example aboutToAppearI HSL MyComponent aboutToAppearI HSL Example onPageShow
先回调 页面组件 Example 的 aboutToAppear 函数 ,
然后回调了 自定义组件 MyComponent 的 aboutToAppear 函数 ,
最后 回调了 页面组件 Example 的 onPageShow 函数 ;
4、屏幕熄灭
写博客的时候 , 屏幕屏保激活 , 手机息屏了 , 此时会回调 页面组件 Example 的 onPageHide 函数 ;
I HSL Example onPageHide
5、屏幕点亮
再次解锁点亮屏幕 , 回调 页面组件 Example 的 onPageShow 函数 ;
I HSL Example onPageShow
6、按下 Home 键
按下 Home 键 , 应用页面进入后台 , 此时显示 Launcher 主界面 , 回调 页面组件 Example 的 onPageHide 函数 ;
I HSL Example onPageHide
7、Home 键返回
在 后台 应用 中查找该应用 , 将应用设置到前台 , 此时会 回调 页面组件 onPageShow 的 onPageShow 函数 ;
I HSL Example onPageShow
8、回退键退出应用
点击回退键 , 退出应用 , 此时会回调 Example 页面的 onBackPress 函数 / onPageHide 函数 / aboutToDisappear 函数 , 然后回调 MyComponent 自定义组件的 aboutToDisappear 函数 ;
I HSL Example onBackPressI HSL Example onPageHideI HSL Example aboutToDisappearI HSL MyComponent aboutToDisappear