基础父类

介绍

基础父类模块的核心是统一生命周期处理，让页面和 ViewModel 的职责清晰。页面只管渲染，逻辑集中到 ViewModel，生命周期由 AppNavDestination 统一转发。

使用原则

• 页面只负责渲染与交互，不直接处理生命周期细节。
• ViewModel 统一接收生命周期回调，逻辑集中在一处。
• 页面必须通过 AppNavDestination 承载，生命周期转发才会生效。

BaseViewModel API

文件位置：core/base/src/main/ets/viewmodel/BaseViewModel.ets

所有方法都是空实现，业务按需覆盖。

方法	说明	参数
aboutToAppear()	页面出现前，组件创建后、build 前	-
aboutToDisappear()	页面隐藏前	-
onDidBuild()	组件构建完成（API 12+）	-
aboutToRecycle()	组件即将回收	-
onWillApplyTheme(theme)	主题即将应用	theme: Theme
aboutToBeDeleted()	组件销毁	-
onShown(reason)	页面显示完成（来自 NavDestination）	reason: VisibilityChangeReason
onHidden(reason)	页面隐藏完成（来自 NavDestination）	reason: VisibilityChangeReason

AppNavDestination API

文件位置：core/ui/src/main/ets/component/navdestination/AppNavDestination.ets

参数	说明	类型	默认值
viewModel	页面对应的 ViewModel 实例	BaseViewModel	必传
content	页面内容 Builder	CustomBuilder	必传
safeAreaEnabled	是否使用安全区内边距	boolean	true
hideTitleBar	是否隐藏标题栏	boolean	false
title	标题内容	string | CustomBuilder | NavDestinationCommonTitle | NavDestinationCustomTitle | Resource	空字符串
titleOptions	标题栏配置	NavigationTitleOptions	默认灰色背景
menus	导航栏菜单内容	Array<NavigationMenuItem> | CustomBuilder	空数组
menuOptions	导航栏菜单配置	NavigationMenuOptions | undefined	undefined
pageBackgroundColor	页面背景色	ResourceColor | ColorMetrics	app.color.bg_grey
windowSafeAreaState	当前窗口安全区状态	WindowSafeAreaState	getWindowSafeAreaState()
paddingValue	自定义内边距	Padding | Length | LocalizedPadding | undefined	undefined

使用示例

ViewModel

import { BaseViewModel } from "base";

/**
 * @file 引导页 ViewModel
 */
@ObservedV2
export default class GuideViewModel extends BaseViewModel {
  /**
   * 页面即将出现
   * @returns {void} 无返回值
   */
  aboutToAppear(): void {
    // 页面即将出现
  }
}

页面

import { AppNavDestination } from "ui";
import GuideViewModel from "../viewmodel/GuideViewModel";

/**
 * @file 引导页视图
 */
@ComponentV2
export struct GuidePage {
  /**
   * 引导页 ViewModel
   */
  @Local
  private vm: GuideViewModel = new GuideViewModel();

  /**
   * 构建引导页
   * @returns {void} 无返回值
   */
  build() {
    AppNavDestination({
      title: "引导页",
      viewModel: this.vm
    }) {
      this.GuideContent();
    }
  }

  /**
   * 引导页内容视图
   * @returns {void} 无返回值
   */
  @Builder
  private GuideContent() {
    Column() {
      Text("引导页内容视图");
    }
  }
}

注意事项

• 页面必须包在 AppNavDestination 里，否则生命周期不会转发到 ViewModel。
• ViewModel 只处理业务和生命周期，不直接操作 UI。