【OpenHarmony】ArkTS 语法基础 ③ ( @Component 自定义组件生命周期回调函数 | @Entry 页面生命周期回调函数 )
【OpenHarmony】ArkTS 语法基础 ③ ( @Component 自定义组件生命周期回调函数 | @Entry 页面生命周期回调函数 )
参考文档 : <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 }) { // 设置子组件间距为10
Text('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 }) { // 设置子组件间距为10
Text('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 aboutToAppear
I HSL MyComponent aboutToAppear
I 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 onBackPress
I HSL Example onPageHide
I HSL Example aboutToDisappear
I HSL MyComponent aboutToDisappear