0
点赞
收藏
分享

微信扫一扫

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

alonwang 2024-10-31 阅读 17

自定义组件和页面的关系:

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

页面生命周期,即被@Entry装饰的组件生命周期,提供以下生命周期接口:

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

组件生命周期,即一般用@Component装饰的自定义组件的生命周期,提供以下生命周期接口:

  • aboutToAppear:组件即将出现时回调该接口,具体时机为在创建自定义组件的新实例后,在执行其build()函数执行。(处理页面的传参最好在此周期实现)
  • onDidBuild:组件build()函数执行完成之后回调该接口,不建议在onDidBuild函数中更改状态变量、使用animateTo等功能,这可能会导致不稳定的UI表现。
  • aboutToDisappear:aboutToDisappear函数在自定义组件析构销毁之前执行不允许在aboutToDisappear函数中改变状态变量,特别是@Link变量的修改可能会导致应用程序行为不稳定。

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

// Index.ets

import { router } from '@kit.ArkUI';


@Entry

@Component

struct MyComponent {

 @State showChild: boolean = true;

 @State btnColor:string = "#FF007DFF";


 // 只有被@Entry装饰的组件才可以调用页面的生命周期

 onPageShow() {

   console.info('Index onPageShow');

 }

 // 只有被@Entry装饰的组件才可以调用页面的生命周期

 onPageHide() {

   console.info('Index onPageHide');

 }


 // 只有被@Entry装饰的组件才可以调用页面的生命周期

 onBackPress() {

   console.info('Index onBackPress');

   this.btnColor ="#FFEE0606";

   return true // 返回true表示页面自己处理返回逻辑,不进行页面路由;返回false表示使用默认的路由返回逻辑,不设置返回值按照false处理

 }


 // 组件生命周期

 aboutToAppear() {

   console.info('MyComponent aboutToAppear');

 }


 // 组件生命周期

 onDidBuild() {

   console.info('MyComponent onDidBuild');

 }


 // 组件生命周期

 aboutToDisappear() {

   console.info('MyComponent aboutToDisappear');

 }


 build() {

   Column() {

     // this.showChild为true,创建Child子组件,执行Child aboutToAppear

     if (this.showChild) {

       Child()

     }

     // this.showChild为false,删除Child子组件,执行Child aboutToDisappear

     Button('delete Child')

       .margin(20)

       .backgroundColor(this.btnColor)

       .onClick(() => {

       this.showChild = false;

     })

     // push到page页面,执行onPageHide

     Button('push to next page')

       .onClick(() => {

         router.pushUrl({ url: 'pages/page' });

       })

   }

 }

}


@Component

struct Child {

 @State title: string = 'Hello World';

 // 组件生命周期

 aboutToDisappear() {

   console.info('[lifeCycle] Child aboutToDisappear');

 }


 // 组件生命周期

 onDidBuild() {

   console.info('[lifeCycle] Child onDidBuild');

 }


 // 组件生命周期

 aboutToAppear() {

   console.info('[lifeCycle] Child aboutToAppear');

 }


 build() {

   Text(this.title)

     .fontSize(50)

     .margin(20)

     .onClick(() => {

       this.title = 'Hello ArkUI';

     })

 }

}

举报

相关推荐

0 条评论