企业网站优化服务商,校园网二手书交易网站建设,网站开发文档撰写作业,做一个微网站平台【鸿蒙HarmonyOS NEXT】页面和自定义组件生命周期 一、环境说明二、页面和自定义组件生命周期三、示例代码加以说明四、小结 一、环境说明 DevEco Studio 版本#xff1a; API版本#xff1a;以12为主
二、页面和自定义组件生命周期
需要明确几个概念#xff1a; 页面… 【鸿蒙HarmonyOS NEXT】页面和自定义组件生命周期 一、环境说明二、页面和自定义组件生命周期三、示例代码加以说明四、小结 一、环境说明 DevEco Studio 版本 API版本以12为主
二、页面和自定义组件生命周期
需要明确几个概念 页面Page 即应用的UI页面。可以由一个或者多个自定义组件组成Entry装饰的自定义组件为页面的入口组件即页面的根节点一个页面有且仅能有一个Entry。只有被Entry装饰的组件才可以调用页面的生命周期。 页面生命周期即被Entry装饰的组件生命周期提供以下生命周期接口 onPageShow页面每次显示时触发。onPageHide页面每次隐藏时触发一次。onBackPress当用户点击返回按钮时触发。 自定义组件Component Component装饰的UI单元可以组合多个系统组件实现UI的复用。 组件生命周期即一般用Component装饰的自定义组件的生命周期提供以下生命周期接口 aboutToAppear组件即将出现时回调该接口具体时机为在创建自定义组件的新实例后在执行其build()函数之前执行。aboutToDisappear在自定义组件即将析构销毁时执行。 当被Entry和Component装饰器同时装饰的页面的生命周期流程如下图所示 需要注意的是部分生命周期回调函数仅对Entry修饰的自定义组件生效它们分别是onPageShow、onPageHide、onBackPress。
三、示例代码加以说明
新建项目取名为pagelifecyc的工程当工程被创建成功后默认只有一个Index.ets页面。新建一个目录取名为view。在view目录下新建一个ArkTS File取名为TestComponent使用Component装饰器修饰作为自定义组件并实现aboutToAppear()和aboutToDisappear()函数具体代码如下/*** 自定义组件生命周期测试*/
Preview // 为了在单个自定义组件中查看效果可以去掉
Component
export struct TestComponent{// 定义数据用于List组件State arr: number[] [0,1,2,4,5,6,7,8,9]// 生命周期函数测试aboutToAppear(): void {console.info(--自定义组件被创建时aboutToAppear函数被调用----)}aboutToDisappear(): void {console.info(--自定义组件被销毁时aboutToDisappear函数被调用----)}/*** UI布局部分*/build() {Column(){List({space: 5}){ForEach(this.arr,(item: number) {ListItem(){Text(项目${item}).fontSize(15).fontWeight(FontWeight.Bold).width(100%).height(50).textAlign(TextAlign.Center).backgroundColor(0xF1F3F5)}})}}}
}新建一个Page取名为LifecycTestPage默认已被Entry和Component装饰器装饰了。在该页面中实现引入TestComponent组件作为其子组件进行渲染并实现onPageShow、onPageHide以及onBackPress函数具体代码如下/*** 用于测试页面生命周期*/
import { TestComponent } from ../view/TestComponent;Preview // 为了在单页面中查看效果可以去掉
Entry // Entry装饰的组件变成了页面
Component
struct LifecycleTestPage {// 生命周期相关函数测试// 页面被创建时调用aboutToAppear(): void {console.info(--LifecycleTestPage页面被创建时aboutToAppear函数被调用----)}// 页面被销毁时调用aboutToDisappear(): void {console.info(--LifecycleTestPage页面被销毁时aboutToDisappear函数被调用----)}// 页面显示时调用onPageShow(): void {console.info(--LifecycleTestPage页面显示时onPageShow函数被调用----)}// 页面隐藏时被调用onPageHide(): void {console.info(--LifecycleTestPage页面隐藏时onPageHide函数被调用----)}// 返回键被点击时调用onBackPress(): boolean | void {console.info(--LifecycleTestPage页面返回键被点击时调用onBackPress函数被调用----)}build() {Column() {// 引入自定义组件TestComponent()}.height(100%).width(100%).alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center)}
}在Index页面中添加跳转按钮并引入路由实现从Index页面跳转到LifecycTestPage页面中具体代码如下import { router } from kit.ArkUI;Entry
Component
struct Index {State message: string 生命周期测试;State btnMsg: string 跳转;build() {Column() {Text(this.message).fontSize(20).width(100%).height(50).textAlign(TextAlign.Center).backgroundColor(0xF1F3F5).margin({bottom: 100})Button(this.btnMsg).width(80%).height(50).onClick((){router.pushUrl({url: pages/LifecycleTestPage})})}.height(100%).width(100%).alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Start)}
}保持在Index页面并点击右侧的预览按钮进行编译和显示Index页面 页面效果 点击跳转按钮观察页面跳转的时候控制台打印的日志信息如下所示 控制台打印出的日志如下I --LifecycleTestPage页面被创建时aboutToAppear函数被调用----
I --自定义组件被创建时aboutToAppear函数被调用----
I --LifecycleTestPage页面显示时onPageShow函数被调用----点击预览界面手机顶部的退回按钮观察页面跳转的时候控制台打印的日志信息如下所示 控制台打印出的日志如下I --LifecycleTestPage页面返回键被点击时调用onBackPress函数被调用----
I --LifecycleTestPage页面隐藏时onPageHide函数被调用----
I --LifecycleTestPage页面被销毁时aboutToDisappear函数被调用----
I --自定义组件被销毁时aboutToDisappear函数被调用----四、小结
通过上述的说明和示例演示相信大家已经很清楚Page页面和自定义组件的生命周期的区别了。细心的读者朋友可能已经发现在自定义组件中同样也可以编写onPageShow、onPageHide以及onBackPress等函数感兴趣的读者朋友可以尝试下在自定义组件中编写onPageShow、onPageHide以及onBackPress等函数看看这些函数是否在自定义组件也能被正常调用呢欢迎大家的留言我们在留言区进行讨论。
