10-鸿蒙4.0学习之组件的生命周期

10-鸿蒙4.0学习之组件的生命周期

import router from '@ohos.router'

@Entry
@Component
struct LifeCycle1 {
  @State message: string = 'Hello World'
  @State isShow: boolean = false

  build() {
    Row() {
      Column({ space: 20 }) {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button('跳转界面')
          .onClick(() => {
            router.pushUrl({
              url: 'pages/LifeCycle2'
            })
          })
        Button('切换')
          .onClick(() => {
            this.isShow = !this.isShow
          })
        Divider()
        if (this.isShow) {
          LifeCycle1_son()
        }

      }
      .width('100%')
    }
    .height('100%')
  }
  // 页面显示
  onPageShow() {
    console.log('page1……onPageShow')
  }
  // 页面隐藏
  onPageHide() {
    console.log('page1……onPageHide')
  }
  // 页面返回
  onBackPress() {
    console.log('page1……onBackPress')
  }
  aboutToAppear() {
    console.log('组件本身……aboutToAppear')
  }
  // 组件析构销毁时触发：删除  移出
  aboutToDisappear() {
    console.log('组件本身……aboutToDisappear')
  }
}

@Component
struct LifeCycle1_son {
  build() {
    Column() {
      Text('子组件').fontSize(50)
    }
  }
  // 组件渲染之前
  aboutToAppear() {
    console.log('LifeCycle1_son……aboutToAppear')
  }
  // 组件析构销毁时触发：删除  移出
  aboutToDisappear() {
    console.log('LifeCycle1_son……aboutToDisappear')
  }
}

import router from '@ohos.router'

@Entry
@Component
struct LifeCycle2 {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button('返回第一个页面')
          .onClick(() => {
            router.back()
          })
      }
      .width('100%')
    }
    .height('100%')
  }
  // 页面显示
  onPageShow(){
    console.log('page2……onPageShow')
  }
  // 页面隐藏
  onPageHide(){
    console.log('page2……onPageHide')
  }
  // 页面返回
  onBackPress(){
    console.log('page2……onBackPress')
  }
}