• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Custom Component Lifecycle
2
3
4The lifecycle callbacks of a custom component are used to notify users of the lifecycle of the component. These callbacks are private and are invoked by the development framework at a specified time at runtime. They cannot be manually invoked from applications.
5
6
7>**NOTE**
8>
9>Promise and asynchronous callback functions can be used in lifecycle functions, for example, network resource getters and timer setters.
10
11
12## aboutToAppear
13
14aboutToAppear?(): void
15
16Invoked after a new instance of the custom component is created and before its **build** function is executed. You can change state variables in the **aboutToAppear** function. The change will take effect when you execute the **build** function next time.
17
18Since API version 9, this API is supported in ArkTS widgets.
19
20## aboutToDisappear
21
22aboutToDisappear?(): void
23
24Invoked before the destructor of the custom component is consumed. Do not change state variables in the **aboutToDisappear** function as doing this can cause unexpected errors. For example, the modification of the **@Link** decorated variable may cause unstable application running.
25
26Since API version 9, this API is supported in ArkTS widgets.
27
28## onPageShow
29
30onPageShow?(): void
31
32Invoked when a page is displayed. This callback is used in the routing process or scenarios where the application is switched to the foreground or background. It works only for the custom components decorated by **@Entry**.
33
34
35## onPageHide
36
37onPageHide?(): void
38
39Invoked when a page is hidden. This callback is used in the routing process or scenarios where the application is switched to the foreground or background. It works only for the custom components decorated by **@Entry**.
40
41
42## onBackPress
43
44onBackPress?(): void
45
46Invoked when a user clicks the back button. It works only for the custom components decorated by **@Entry**.
47
48
49```ts
50// xxx.ets
51@Entry
52@Component
53struct IndexComponent {
54  @State textColor: Color = Color.Black;
55
56  onPageShow() {
57    this.textColor = Color.Blue;
58    console.info('IndexComponent onPageShow');
59  }
60
61  onPageHide() {
62    this.textColor = Color.Transparent;
63    console.info('IndexComponent onPageHide');
64  }
65
66  onBackPress() {
67    this.textColor = Color.Red;
68    console.info('IndexComponent onBackPress');
69  }
70
71  build() {
72    Column() {
73      Text('Hello World')
74        .fontColor(this.textColor)
75        .fontSize(30)
76        .margin(30)
77    }.width('100%')
78  }
79}
80```
81
82![en-us_image_0000001563060749](figures/en-us_image_0000001563060749.png)
83
84
85## onLayout<sup>9+</sup>
86
87onLayout?(children: Array&lt;LayoutChild&gt;, constraint: ConstraintSizeOptions): void
88
89Invoked when the custom component lays out its child components. Through this callback the component receives its child component layout information and size constraint from the framework. The state variable cannot be changed in the **onLayout** callback.
90
91Since API version 9, this API is supported in ArkTS widgets.
92
93**Parameters**
94
95| Name       | Type                                      | Description              |
96| ---------- | ---------------------------------------- | ---------------- |
97| children   | Array&lt;[LayoutChild](#layoutchild9)&gt; | Child component layout information.        |
98| constraint | [ConstraintSizeOptions](ts-types.md#constraintsizeoptions) | Size constraint information of the parent component.|
99
100
101## onMeasure<sup>9+</sup>
102
103onMeasure?(children: Array&lt;LayoutChild&gt;, constraint: ConstraintSizeOptions): void
104
105Invoked when the custom component lays out its child components. Through this callback the component receives its child component layout information and size constraint from the framework. The state variable cannot be changed in the **onMeasure** callback.
106
107Since API version 9, this API is supported in ArkTS widgets.
108
109**Parameters**
110
111| Name       | Type                                      | Description              |
112| ---------- | ---------------------------------------- | ---------------- |
113| children   | Array&lt;[LayoutChild](#layoutchild9)&gt; | Child component layout information.        |
114| constraint | [ConstraintSizeOptions](ts-types.md#constraintsizeoptions) | Size constraint information of the parent component.|
115
116
117## LayoutChild<sup>9+</sup>
118
119Provides the child component layout information.
120
121Since API version 9, this API is supported in ArkTS widgets.
122
123| Parameter        | Type                                    | Description                 |
124| ---------- | ---------------------------------------- | ------------------- |
125| name       | string                                   | Name of the child component.             |
126| id         | string                                   | ID of the child component.             |
127| constraint | [ConstraintSizeOptions](ts-types.md#constraintsizeoptions) | Constraint size of the child component.           |
128| borderInfo | [LayoutBorderInfo](#layoutborderinfo9)   | Provides the border information of the child component.       |
129| position   | [Position](ts-types.md#position8)         | Position coordinates of the child component.           |
130| measure    | (childConstraint:) =&gt; void  | Method called to apply the size constraint to the child component.|
131| layout     | (LayoutInfo:  [LayoutInfo](#layoutinfo9)) =&gt; void| Method called to apply the layout information to the child component.|
132
133
134## LayoutBorderInfo<sup>9+</sup>
135
136Provides the border information of the child component.
137
138Since API version 9, this API is supported in ArkTS widgets.
139
140| Parameter         | Type                                | Description                     |
141| ----------- | ------------------------------------ | ----------------------- |
142| borderWidth | [EdgeWidths](ts-types.md#edgewidths9) | Edge widths in different directions of the component.|
143| margin      | [Margin](ts-types.md#margin)         | Margins in different directions of the component.  |
144| padding     | [Padding](ts-types.md#padding)       | Paddings in different directions of the component.  |
145
146
147## LayoutInfo<sup>9+</sup>
148
149Provides the layout information of the child component.
150
151Since API version 9, this API is supported in ArkTS widgets.
152
153| Parameter        | Type                                    | Description      |
154| ---------- | ---------------------------------------- | -------- |
155| position   | [Position](ts-types.md#position8)         | Position coordinates of the child component.|
156| constraint | [ConstraintSizeOptions](ts-types.md#constraintsizeoptions) | Constraint size of the child component.|
157
158
159```ts
160// xxx.ets
161@Entry
162@Component
163struct Index {
164  build() {
165    Column() {
166      CustomLayout() {
167        ForEach([1, 2, 3], (index) => {
168          Text('Sub' + index)
169            .fontSize(30)
170            .borderWidth(2)
171        })
172      }
173    }
174  }
175}
176
177
178@Component
179struct CustomLayout {
180  @BuilderParam builder: () => {};
181
182  onLayout(children: Array<LayoutChild>, constraint: ConstraintSizeOptions) {
183    let pos = 0;
184    children.forEach((child) => {
185      child.layout({ position: { x: pos, y: pos }, constraint: constraint })
186      pos += 100;
187    })
188  }
189
190  onMeasure(children: Array<LayoutChild>, constraint: ConstraintSizeOptions) {
191    let size = 100;
192    children.forEach((child) => {
193      child.measure({ minHeight: size, minWidth: size, maxWidth: size, maxHeight: size })
194      size += 50;
195    })
196  }
197
198  build() {
199    this.builder()
200  }
201}
202```
203
204![en-us_image_0000001511900496](figures/en-us_image_0000001511900496.png)
205