鸿蒙 DevEcoStudio:组件实例（页面及组件生命周期函数）

L树懒先生2024-05-11 22:02

【使用onPageshow等生命周期函数】

在entry/src/main/ets/pages路径下创建Page1.ets:

复制代码

import router from '@ohos.router'
@Entry
@Component
struct Page1 {
  @State message: string = 'Hello World'
  @State show: boolean=true
  aboutToAppear(){
    console.log('Page1组件创建实例')
  }
  aboutToDisappear(){
    console.log('Page1组件销毁')
  }
  onPageShow(){
    console.log('page1页面展示')
  }
  onPageHide(){
    console.log("page1页面隐藏")
  }
  build() {
      Column() {
        Button('show')
          .onClick(()=>{
            this.show=!this.show
          })
        if (this.show){
          ComponentA()
        }
        Button('跳转到Page2')
          .onClick(()=>{
            router.pushUrl({url:"pages/Page2"})
          })
        Button('跳转到Page3')
          .onClick(()=>{
            router.replaceUrl({url:"pages/Page3"})
          })
      }
      .width('100%')
      .height('100%')
  }
}
@Component
struct ComponentA{
  aboutToAppear(){
    console.log('componentA组件创建实例')
  }
  aboutToDisappear(){
    console.log('componentA组件销毁');
  }
  build(){
    Text('compontent A')
  }
}

在entry/src/main/ets/pages路径下同样创建Page2.ets和Page3.ets:

1.Page2.ets内容：

复制代码

@Entry
@Component
struct Page2 {
  @State message: string = 'Page2内容'
  onPageShow(){
    console.log('page2页面展示')
  }
  onPageHide(){
    console.log("page2页面隐藏")
  }
  onBackPress(){
    console.log("Page2页面返回")
  }
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

2.Page3.ets内容：

复制代码

@Entry
@Component
struct Page3 {
  @State message: string = 'Page3内容'
  onPageShow(){
    console.log('page3页面展示')
  }
  onPageHide(){
    console.log("page3页面隐藏")
  }
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

在下边点击Log->HiLog，中间最左边的下拉菜单选择Phone，查看效果，如图：