鸿蒙——自定义组件及页面生命周期

自定义组件的生命周期

aboutToAppear：创建时触发，在build()函数之前
aboutToDisappear：销毁时触发

在自定义组件的生命周期基础之上，页面生命周期额外提供以下生命周期回调

onPageShow：页面每次显示时触发
onPageHide：页面每次隐藏时触发
onBackPress：点击返回时触发

下面代码是Index页面代码

Entry
@Component
struct Index {
  @State message: string = 'Hello World';
 
  // 生命周期相关函数测试
  // 页面被创建时调用
  aboutToAppear(): void {
    console.info('--Index页面被创建时，aboutToAppear函数被调用----')
  }
 
  // 页面被销毁时调用
  aboutToDisappear(): void {
    console.info('--Index页面被销毁时，aboutToDisappear函数被调用----')
  }
 
  // 页面显示时调用
  onPageShow(): void {
    console.info('--Index页面显示时，onPageShow函数被调用----')
  }
 
  // 页面隐藏时被调用
  onPageHide(): void {
    console.info('--Index页面隐藏时，onPageHide函数被调用----')
  }
 
  // 返回键被点击时调用
  onBackPress(): boolean | void {
    console.info('--Index页面返回键被点击时调用，onBackPress函数被调用----')
    //返回true表示页面自己处理返回逻辑
    //返回false表示使用默认的路由返回逻辑，不设置返回值按照false处理
    return true;
  }
 
  build() {
    RelativeContainer() {
      ToolbarView()
      Text(this.message)
        .id('HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')
  }
}

下面是自定view代码

@Preview
@Component
export struct ToolbarView {
 
  // 生命周期相关函数测试
  // 页面被创建时调用
  aboutToAppear() {
    console.info('--自定义组件被创建时，aboutToAppear函数被调用----')
  }
 
  // 页面被销毁时调用
  aboutToDisappear(): void {
    console.info('--自定义组件被销毁时，aboutToDisappear函数被调用----')
  }
  @State message: string = '标题';
 
 
  build() {
    RelativeContainer() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width(44)
 
 
  }
}