OpemHarmony应用开发入门——页面和组件的生命周期

lywenjoy
发布于 2023-8-8 09:21
浏览
0收藏

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

自定义组件:@Component装饰的UI单元,可以组合多个系统组件实现UI的复用。
页面:即应用的UI页面。可以由一个或者多个自定义组件组成,@Entry装饰的自定义组件为页面的入口组件,即页面的根节点,一个页面有且仅能有一个@Entry。只有被@Entry装饰的组件才可以调用页面的生命周期。
页面生命周期: 即被@Entry装饰的组件生命周期,提供以下生命周期接口:
onPageShow:页面每次显示时触发。
onPageHide:页面每次隐藏时触发一次。
onBackPress:当用户点击返回按钮时触发。
组件生命周期: 即一般用@Component装饰的自定义组件的生命周期,提供以下生命周期接口:
aboutToAppear:组件即将出现时回调该接口,具体时机为在创建自定义组件的新实例后,在执行其build()函数之前执行。
aboutToDisappear:在自定义组件即将析构销毁时执行。
被@Entry装饰的组件(首页)生命周期如图所示
OpemHarmony应用开发入门——页面和组件的生命周期-开源基础软件社区

接下来看代码加深理解

// Index.ets
import router from ‘@ohos.router’;

@Entry
@Component
struct MyComponent {
@State showChild: boolean = true;

// 只有被@Entry装饰的组件才可以调用页面的生命周期
onPageShow() {
console.info(‘Index onPageShow’);
}
// 只有被@Entry装饰的组件才可以调用页面的生命周期
onPageHide() {
console.info(‘Index onPageHide’);
}

// 只有被@Entry装饰的组件才可以调用页面的生命周期
onBackPress() {
console.info(‘Index onBackPress’);
}

// 组件生命周期
aboutToAppear() {
console.info(‘MyComponent aboutToAppear’);
}

// 组件生命周期
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’).onClick(() => {
this.showChild = false;
})
// push到Page2页面,执行onPageHide
Button(‘push to next page’)
.onClick(() => {
router.pushUrl({ url: ‘pages/Page2’ });
})
}

}
}

@Component
struct Child {
@State title: string = ‘Hello World’;
// 组件生命周期
aboutToDisappear() {
console.info(‘[lifeCycle] Child aboutToDisappear’)
}
// 组件生命周期
aboutToAppear() {
console.info(‘[lifeCycle] Child aboutToAppear’)
}

build() {
Text(this.title).fontSize(50).onClick(() => {
this.title = ‘Hello ArkUI’;
})
}
}
以上示例创建了MyComponent和Child两个自定义组件,其中MyComponent组件使用@Entry装饰器(装饰的组件将作为页面的入口,页面加载时将被渲染显示)
==标记==页面的生命周期方法
OpemHarmony应用开发入门——页面和组件的生命周期-开源基础软件社区
==标记==组件的生命周期方法
OpemHarmony应用开发入门——页面和组件的生命周期-开源基础软件社区
例如之前的天气预报,为了让页面出现之前可以自动初始化数据,就可以使用生命周期接口
OpemHarmony应用开发入门——页面和组件的生命周期-开源基础软件社区

收藏
回复
举报
回复
    相关推荐