• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Show/Hide Event
2
3The show/hide event is triggered when a component is mounted or unmounted from the component tree. A component appears when mounted to the component tree and disappears when unmounted from the component tree.
4
5> **NOTE**
6>
7> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
8
9## onAttach<sup>12+</sup>
10
11onAttach(callback: Callback\<void>): T
12
13Called when this component is mounted to the component tree.
14
15> **NOTE**
16>
17> The callback must be called before the component layout and rendering process.
18>
19> It is not allowed to make changes to the component tree in the callback, for example, initiating animations or altering the component tree structure with **if-else** statements.
20
21**Atomic service API**: This API can be used in atomic services since API version 12.
22
23**System capability**: SystemCapability.ArkUI.ArkUI.Full
24
25**Return value**
26
27| Type| Description|
28| -------- | -------- |
29| T | Current component.|
30
31
32## onDetach<sup>12+</sup>
33
34onDetach(callback: Callback\<void>): T
35
36Called when this component is unmounted from the component tree.
37
38**Atomic service API**: This API can be used in atomic services since API version 12.
39
40**System capability**: SystemCapability.ArkUI.ArkUI.Full
41
42**Return value**
43
44| Type| Description|
45| -------- | -------- |
46| T | Current component.|
47
48## onAppear
49
50onAppear(event: () => void): T
51
52Called when this component is displayed.
53
54> **NOTE**
55>
56> This callback may be called after the component layout and rendering process.
57
58**Widget capability**: Since API version 9, this feature is supported in ArkTS widgets.
59
60**Atomic service API**: This API can be used in atomic services since API version 11.
61
62**System capability**: SystemCapability.ArkUI.ArkUI.Full
63
64**Return value**
65
66| Type| Description|
67| -------- | -------- |
68| T | Current component.|
69
70
71## onDisAppear
72
73onDisAppear(event: () => void): T
74
75Triggered when the component is hidden.
76
77**Widget capability**: Since API version 9, this feature is supported in ArkTS widgets.
78
79**Atomic service API**: This API can be used in atomic services since API version 11.
80
81**System capability**: SystemCapability.ArkUI.ArkUI.Full
82
83**Return value**
84
85| Type| Description|
86| -------- | -------- |
87| T | Current component.|
88
89
90## Example
91
92This example demonstrates how to control the mounting and unmounting of a component using a button, triggering **onAttach** and **onDetach** events.
93
94```ts
95// xxx.ets
96import { promptAction } from '@kit.ArkUI'
97
98@Entry
99@Component
100struct AppearExample {
101  @State isShow: boolean = true
102  @State changeAppear: string = 'Show/Hide'
103  private myText: string = 'Text for onAppear'
104
105  build() {
106    Column() {
107      Button(this.changeAppear)
108        .onClick(() => {
109          this.isShow = !this.isShow
110        }).margin(15)
111      if (this.isShow) {
112        Text(this.myText).fontSize(26).fontWeight(FontWeight.Bold)
113          .onAttach(() => {
114            promptAction.showToast({
115              message: 'Text shown.',
116              duration: 2000,
117              bottom: 500
118            })
119          })
120          .onDetach(() => {
121            promptAction.showToast({
122              message: 'Text hidden.',
123              duration: 2000,
124              bottom: 500
125            })
126          })
127      }
128    }.padding(30).width('100%')
129  }
130}
131```
132
133![en-us_image_0000001219864151](figures/en-us_image_0000001219864151.gif)
134