智能客服
你问我答,随时在线为你解决问题

























挂载卸载事件指组件从组件树上挂载、卸载时触发的事件。
从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
onAttach(callback: Callback<void>): T
组件挂载到组件树时触发此回调。由于以下说明中的限制,建议使用onAppear替代此接口。
回调在组件布局渲染前调用。
不允许在回调中对组件树进行变更,例如启动动画或使用if-else变更组件树结构。
元服务API: 从API version 12开始,该接口支持在元服务中使用。
模型约束: 此接口仅可在Stage模型下使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数:
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| callback | Callback<void> | 是 | onAttach事件的回调函数,表示组件已经挂载至组件树。 |
返回值:
| 类型 | 说明 |
|---|---|
| T | 返回当前组件。 |
onDetach(callback: Callback<void>): T
组件从组件树卸载时触发此回调。建议使用onDisAppear替代此接口。
元服务API: 从API version 12开始,该接口支持在元服务中使用。
模型约束: 此接口仅可在Stage模型下使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数:
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| callback | Callback<void> | 是 | onDetach事件的回调函数,表示组件已经从组件树卸载。 |
返回值:
| 类型 | 说明 |
|---|---|
| T | 返回当前组件。 |
onAppear(event: () => void): T
组件挂载后触发此回调。
回调的调用时机有可能发生在组件布局渲染后。
卡片能力: 从API version 9开始,该接口支持在ArkTS卡片中使用。
元服务API: 从API version 11开始,该接口支持在元服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数:
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| event | () => void | 是 | onAppear事件的回调函数,表示组件已挂载显示。 |
返回值:
| 类型 | 说明 |
|---|---|
| T | 返回当前组件。 |
onDisAppear(event: () => void): T
组件从组件树卸载时触发此回调。
卡片能力: 从API version 9开始,该接口支持在ArkTS卡片中使用。
元服务API: 从API version 11开始,该接口支持在元服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数:
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| event | () => void | 是 | onDisAppear事件的回调函数,表示组件已卸载消失。 |
返回值:
| 类型 | 说明 |
|---|---|
| T | 返回当前组件。 |
该示例通过按钮控制组件的挂载和卸载,触发onAttach和onDetach事件。
- // xxx.ets
- import { promptAction } from '@kit.ArkUI';
-
- @Entry
- @Component
- struct AppearExample {
- @State isShow: boolean = true;
- @State changeAppear: string = '点我卸载挂载组件';
- private myText: string = 'Text for onAppear';
-
- build() {
- Column() {
- Button(this.changeAppear)
- .onClick(() => {
- this.isShow = !this.isShow
- }).margin(15)
- if (this.isShow) {
- Text(this.myText).fontSize(26).fontWeight(FontWeight.Bold)
- .onAttach(() => {
- this.getUIContext().getPromptAction().showToast({
- message: 'The text is shown',
- duration: 2000,
- bottom: 500
- })
- })
- .onDetach(() => {
- this.getUIContext().getPromptAction().showToast({
- message: 'The text is hidden',
- duration: 2000,
- bottom: 500
- })
- })
- }
- }.padding(30).width('100%')
- }
- }

智能客服
你问我答,随时在线为你解决问题
合作咨询
我们的专家服务团队将竭诚为您提供专业的合作咨询服务
解决方案
精准高效的一站式服务支持,助力开发者商业成功