页面的生命周期

自定义组件的生命周期

在KaihongOS中，学习页面的生命周期需要先了解自定义组件。

1. 自定义组件（Component）

自定义组件是通过@Component装饰的UI单元，用于组合多个系统组件来实现UI的复用。
自定义组件可以包含成员变量和成员函数，但不支持静态成员变量和静态函数，所有成员变量和成员函数都是私有的。
自定义组件的成员变量本地初始化有些是可选的，有些是必选的，具体取决于是否需要从父组件通过参数传递初始化子组件的成员变量。
自定义组件的生命周期接口包括aboutToAppear和aboutToDisappear，分别在组件即将出现和即将销毁时回调。

说明： 关于自定义组件的生命周期可参见：自定义组件的生命周期

2. 页面（Page）

页面是指应用的UI页面，可以由一个或多个自定义组件组成。
页面的入口组件是被@Entry装饰的自定义组件，这个组件是页面的根节点，一个页面有且仅有一个@Entry。
只有被@Entry装饰的组件才可以调用页面的生命周期。
页面的生命周期接口包括onPageShow、onPageHide和onBackPress，分别在页面每次显示、隐藏和用户点击返回按钮时触发。

总结来说，自定义组件是构成页面的基本单元，可以复用和组合以构建更复杂的UI结构。而页面是由一个或多个自定义组件组成的完整的UI界面，具有自己的生命周期，用于处理页面级别的事件和状态。

页面的生命周期

onPageShow：

页面每次显示时触发一次，包括路由过程、应用进入前台等场景。

onPageHide：

页面每次隐藏时触发一次，包括路由过程、应用进入后台等场景。

onBackPress：

当用户点击返回按钮时触发。

示例代码：

// index.ets
@Entry
@Component
struct PageLifecycle {
  @State textColor: Color = Color.Black;

  onPageShow() {
    this.textColor = Color.Blue;
    console.info('PageLifecycle onPageShow');
  }

  onPageHide() {
    this.textColor = Color.Transparent;
    console.info('PageLifecycle onPageHide');
  }

  onBackPress() {
    this.textColor = Color.Green;
    console.info('PageLifecycle onBackPress');
  }

  build() {
    Column() {
      Text('Hello KaihongOS')
        .fontColor(this.textColor)
        .fontSize(30)
        .margin(30)
    }.width('100%')
  }
}