• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 挂载卸载事件
2
3挂载卸载事件指组件从组件树上挂载、卸载时触发的事件。
4
5> **说明：**
6>
7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9
10## 事件
11
12| 名称                                             | 支持冒泡 | 功能描述                                                     |
13| ------------------------------------------------ | -------- | ------------------------------------------------------------ |
14| onAppear(event:&nbsp;()&nbsp;=&gt;&nbsp;void)    | 否       | 组件挂载显示时触发此回调。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
15| onDisAppear(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 否       | 组件卸载消失时触发此回调。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
16
17
18## 示例
19
20```ts
21// xxx.ets
22import promptAction from '@ohos.promptAction'
23
24@Entry
25@Component
26struct AppearExample {
27  @State isShow: boolean = true
28  @State changeAppear: string = 'Hide Text'
29  private myText: string = 'Text for onAppear'
30
31  build() {
32    Column() {
33      Button(this.changeAppear)
34        .onClick(() => {
35          this.isShow = !this.isShow
36        }).margin(15)
37      if (this.isShow) {
38        Text(this.myText).fontSize(26).fontWeight(FontWeight.Bold)
39          .onAppear(() => {
40            this.changeAppear = 'Hide Text'
41            promptAction.showToast({
42              message: 'The text is shown',
43              duration: 2000
44            })
45          })
46          .onDisAppear(() => {
47            this.changeAppear = 'Show Text'
48            promptAction.showToast({
49              message: 'The text is hidden',
50              duration: 2000
51            })
52          })
53      }
54    }.padding(30).width('100%')
55  }
56}
57```
58
59![zh-cn_image_0000001219864151](figures/zh-cn_image_0000001219864151.gif)
60