【OpenHarmony】ArkTS 语法基础 ③ ( @Component 自定义组件生命周期回调函数 | @Entry 页面生命周期回调函数 )

文章目录

• 一、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 }) { // 设置子组件间距为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