当前位置:   article > 正文

【鸿蒙 HarmonyOS 4.0】UIAbility、页面及组件的生命周期_鸿蒙4 uiability

鸿蒙4 uiability

一、背景

主要梳理下鸿蒙系统开发中常用的生命周期

二、UIAbility组件 

UIAbility组件是一种包含UI界面的应用组件,主要用于和用户交互。

UIAbility组件是系统调度的基本单元,为应用提供绘制界面的窗口;一个UIAbility组件中可以通过多个页面来实现一个功能模块。每一个UIAbility组件实例,都对应于一个最近任务列表中的任务。

2.1、UIAbility组件生命周期

当用户打开、切换和返回到对应应用时,应用中的UIAbility实例会在其生命周期的不同状态之间转换。

UIAbility的生命周期包括Create、Foreground、Background、Destroy四个状态,如下图所示。

2.2、生命周期状态说明

2.2.1、Create状态

在应用加载过程中,UIAbility实例创建完成时触发,系统会调用onCreate()回调。可以在该回调中进行页面初始化操作,例如变量定义资源加载等,用于后续的UI界面展示。

2.2.2、WindowStageCreate和WindowStageDestroy状态

UIAbility实例创建完成之后,在进入Foreground之前,系统会创建一个WindowStage。WindowStage创建完成后会进入onWindowStageCreate()回调,可以在该回调中设置UI界面加载、设置WindowStage的事件订阅。

2.2.3、Foreground和Background状态 

Foreground和Background状态分别在UIAbility实例切换至前台和切换至后台时触发,对应于onForeground()回调和onBackground()回调。

onForeground()回调,在UIAbility的UI界面可见之前,如UIAbility切换至前台时触发。可以在onForeground()回调中申请系统需要的资源,或者重新申请在onBackground()中释放的资源。

onBackground()回调,在UIAbility的UI界面完全不可见之后,如UIAbility切换至后台时候触发。可以在onBackground()回调中释放UI界面不可见时无用的资源,或者在此回调中执行较为耗时的操作,例如状态保存等。

2.2.4、Destroy状态

Destroy状态在UIAbility实例销毁时触发。可以在onDestroy()回调中进行系统资源的释放、数据的保存等操作。

三、页面和自定义组件生命周期

3.1、先明确自定义组件和页面的关系:

①自定义组件:@Component装饰的UI单元,可以组合多个系统组件实现UI的复用,可以调用组件的生命周期。

②页面:即应用的UI页面。可以由一个或者多个自定义组件组成,@Entry装饰的自定义组件为页面的入口组件,即页面的根节点,一个页面有且仅能有一个@Entry。只有被@Entry装饰的组件才可以调用页面的生命周期。

3.2、页面生命周期:

onPageShow:页面每次显示时触发一次,包括路由过程、应用进入前台等场景。

onPageHide:页面每次隐藏时触发一次,包括路由过程、应用进入后台等场景。 onBackPress:当用户点击返回按钮时触发。

3.3、组件生命周期:

①aboutToAppear:组件即将出现时回调该接口,具体时机为在创建自定义组件的新实例后,在执行其build()函数之前执行。

②aboutToDisappear:在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量,特别是@Link变量的修改可能会导致应用程序行为不稳定。

以下示例展示了生命周期的调用时机:示例来自于官网文档中心

  1. // Index.ets
  2. import router from '@ohos.router';
  3. @Entry
  4. @Component
  5. struct MyComponent {
  6. @State showChild: boolean = true;
  7. // 只有被@Entry装饰的组件才可以调用页面的生命周期
  8. onPageShow() {
  9. console.info('Index onPageShow');
  10. }
  11. // 只有被@Entry装饰的组件才可以调用页面的生命周期
  12. onPageHide() {
  13. console.info('Index onPageHide');
  14. }
  15. // 只有被@Entry装饰的组件才可以调用页面的生命周期
  16. onBackPress() {
  17. console.info('Index onBackPress');
  18. }
  19. // 组件生命周期
  20. aboutToAppear() {
  21. console.info('MyComponent aboutToAppear');
  22. }
  23. // 组件生命周期
  24. aboutToDisappear() {
  25. console.info('MyComponent aboutToDisappear');
  26. }
  27. build() {
  28. Column() {
  29. // this.showChild为true,创建Child子组件,执行Child aboutToAppear
  30. if (this.showChild) {
  31. Child()
  32. }
  33. // this.showChild为false,删除Child子组件,执行Child aboutToDisappear
  34. Button('delete Child').onClick(() => {
  35. this.showChild = false;
  36. })
  37. // push到Page2页面,执行onPageHide
  38. Button('push to next page')
  39. .onClick(() => {
  40. router.pushUrl({ url: 'pages/Page2' });
  41. })
  42. }
  43. }
  44. }
  45. @Component
  46. struct Child {
  47. @State title: string = 'Hello World';
  48. // 组件生命周期
  49. aboutToDisappear() {
  50. console.info('[lifeCycle] Child aboutToDisappear')
  51. }
  52. // 组件生命周期
  53. aboutToAppear() {
  54. console.info('[lifeCycle] Child aboutToAppear')
  55. }
  56. build() {
  57. Text(this.title).fontSize(50).onClick(() => {
  58. this.title = 'Hello ArkUI';
  59. })
  60. }
  61. }

以上示例中,Index页面包含两个自定义组件,一个是被@Entry装饰的MyComponent,也是页面的入口组件,即页面的根节点;一个是Child,是MyComponent的子组件。只有@Entry装饰的节点才可以使页面级别的生命周期方法生效,所以MyComponent中声明了当前Index页面的页面生命周期函数。MyComponent和其子组件Child也同时也声明了组件的生命周期函数。

  • 应用冷启动的初始化流程为:MyComponent aboutToAppear --> MyComponent build --> Child aboutToAppear --> Child build --> Child build执行完毕 --> MyComponent build执行完毕 --> Index onPageShow。
  • 点击“delete Child”,if绑定的this.showChild变成false,删除Child组件,会执行Child aboutToDisappear方法。
  • 点击“push to next page”,调用router.pushUrl接口,跳转到另外一个页面,当前Index页面隐藏,执行页面生命周期Index onPageHide。此处调用的是router.pushUrl接口,Index页面被隐藏,并没有销毁,所以只调用onPageHide。跳转到新页面后,执行初始化新页面的生命周期的流程。
  • 如果调用的是router.replaceUrl,则当前Index页面被销毁,执行的生命周期流程将变为:Index onPageHide --> MyComponent aboutToDisappear --> Child aboutToDisappear。上文已经提到,组件的销毁是从组件树上直接摘下子树,所以先调用父组件的aboutToDisappear,再调用子组件的aboutToDisappear,然后执行初始化新页面的生命周期流程。
  • 点击返回按钮,触发页面生命周期Index onBackPress,且触发返回一个页面后会导致当前Index页面被销毁。
  • 最小化应用或者应用进入后台,触发Index onPageHide。当前Index页面没有被销毁,所以并不会执行组件的aboutToDisappear。应用回到前台,执行Index onPageShow。
  • 退出应用,执行Index onPageHide --> MyComponent aboutToDisappear --> Child aboutToDisappear。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/148842
推荐阅读
  

闽ICP备14008679号