1# 挂载卸载事件 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @jiangtao92--> 5<!--Designer: @piggyguy--> 6<!--Tester: @songyanhong--> 7<!--Adviser: @HelloCrease--> 8 9挂载卸载事件指组件从组件树上挂载、卸载时触发的事件。 10 11> **说明：** 12> 13> 从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14 15## onAttach<sup>12+</sup> 16 17onAttach(callback: Callback\<void>): T 18 19组件挂载到组件树时触发此回调。 20 21> **说明：** 22> 23> 回调在组件布局渲染前调用。 24> 25> 不允许在回调中对组件树进行变更，例如启动动画或使用if-else变更组件树结构。 26 27**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 28 29**系统能力：** SystemCapability.ArkUI.ArkUI.Full 30 31**参数：** 32 33| 参数名 | 类型 | 必填 | 说明 | 34| ------ | ------ | ---- | -------------------------- | 35| callback | [Callback](./ts-types.md#callback12)\<void> | 是 | onAttach事件的回调函数，表示组件已经挂载至组件树。| 36 37**返回值：** 38 39| 类型 | 说明 | 40| -------- | -------- | 41| T | 返回当前组件。 | 42 43 44## onDetach<sup>12+</sup> 45 46onDetach(callback: Callback\<void>): T 47 48组件从组件树卸载时触发此回调。 49 50**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 51 52**系统能力：** SystemCapability.ArkUI.ArkUI.Full 53 54**参数：** 55 56| 参数名 | 类型 | 必填 | 说明 | 57| ------ | ------ | ---- | -------------------------- | 58| callback | [Callback](./ts-types.md#callback12)\<void> | 是 | onDetach事件的回调函数，表示组件已经从组件树卸载。| 59 60**返回值：** 61 62| 类型 | 说明 | 63| -------- | -------- | 64| T | 返回当前组件。 | 65 66## onAppear 67 68onAppear(event: () => void): T 69 70组件挂载显示后触发此回调。 71 72> **说明：** 73> 74> 回调的调用时机有可能发生在组件布局渲染后。 75 76**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 77 78**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 79 80**系统能力：** SystemCapability.ArkUI.ArkUI.Full 81 82**参数：** 83 84| 参数名 | 类型 | 必填 | 说明 | 85| ------ | ------ | ---- | -------------------------- | 86| event | () => void| 是 | onAppear事件的回调函数，表示组件已挂载显示。| 87 88**返回值：** 89 90| 类型 | 说明 | 91| -------- | -------- | 92| T | 返回当前组件。 | 93 94 95## onDisAppear 96 97onDisAppear(event: () => void): T 98 99组件从组件树卸载消失时触发此回调。 100 101**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 102 103**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 104 105**系统能力：** SystemCapability.ArkUI.ArkUI.Full 106 107**参数：** 108 109| 参数名 | 类型 | 必填 | 说明 | 110| ------ | ------ | ---- | -------------------------- | 111| event | () => void| 是 | onDisAppear事件的回调函数，表示组件已卸载消失。| 112 113**返回值：** 114 115| 类型 | 说明 | 116| -------- | -------- | 117| T | 返回当前组件。 | 118 119 120## 示例 121 122该示例通过按钮控制组件的挂载和卸载，触发onAttach和onDetach事件。 123 124```ts 125// xxx.ets 126import { promptAction } from '@kit.ArkUI'; 127 128@Entry 129@Component 130struct AppearExample { 131 @State isShow: boolean = true; 132 @State changeAppear: string = '点我卸载挂载组件'; 133 private myText: string = 'Text for onAppear'; 134 135 build() { 136 Column() { 137 Button(this.changeAppear) 138 .onClick(() => { 139 this.isShow = !this.isShow 140 }).margin(15) 141 if (this.isShow) { 142 Text(this.myText).fontSize(26).fontWeight(FontWeight.Bold) 143 .onAttach(() => { 144 this.getUIContext().getPromptAction().showToast({ 145 message: 'The text is shown', 146 duration: 2000, 147 bottom: 500 148 }) 149 }) 150 .onDetach(() => { 151 this.getUIContext().getPromptAction().showToast({ 152 message: 'The text is hidden', 153 duration: 2000, 154 bottom: 500 155 }) 156 }) 157 } 158 }.padding(30).width('100%') 159 } 160} 161``` 162 163 164
