1# Custom Component Lifecycle Callbacks 2 3The 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. 4 5> **NOTE** 6> 7> - Promise and asynchronous callback functions can be used in lifecycle functions, for example, network resource getters and timer setters. 8> 9> - Do not use **async await** in lifecycle functions. 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**Example 1:** 29 30```ts 31// xxx.ets 32@Entry 33@Component 34struct CountDownTimerComponent { 35 @State countDownFrom: number = 10 36 private timerId: number = -1 37 38 aboutToAppear(): void { 39 this.timerId = setInterval(() => { 40 if (this.countDownFrom <= 1) { 41 clearTimeout(this.timerId) // Clear the timer when the value of countDownFrom is less than or equal to 1. 42 } 43 this.countDownFrom -= 1 44 }, 1000) // The value of countDownFrom decreases by 1 every second. 45 } 46 47 aboutToDisappear(): void { 48 if (this.timerId > 0) { 49 clearTimeout(this.timerId) 50 this.timerId = -1 51 } 52 } 53 54 build() { 55 Column() { 56 Text(`${this.countDownFrom} sec left`) 57 .fontSize(30) 58 .margin(30) 59 }.width('100%') 60 } 61} 62``` 63 64 65 66The example above shows that lifecycle functions are critical for **CountDownTimerComponent** to manage its timer resources. Similar functions include loading resources asynchronously from the network. 67 68## onPageShow 69 70onPageShow?(): void 71 72Invoked each time 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. Only the custom components decorated by **@Entry** take effect. 73 74## onPageHide 75 76onPageHide?(): void 77 78Invoked each time 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. Only the custom components decorated by **@Entry** take effect. 79 80## onBackPress 81 82onBackPress?(): void 83 84Invoked when a user clicks the back button. This callback takes effect only for the custom components decorated by **@Entry**. If **true** is returned, the page processes the return logic and no page routing is performed. If **false** is returned, the default route return logic is used. If the return value is not set, the value **false** is used. 85 86**Example 2:** 87 88```ts 89// xxx.ets 90@Entry 91@Component 92struct IndexComponent { 93 @State textColor: Color = Color.Black 94 95 onPageShow() { 96 this.textColor = Color.Blue 97 console.info('IndexComponent onPageShow') 98 } 99 100 onPageHide() { 101 this.textColor = Color.Transparent 102 console.info('IndexComponent onPageHide') 103 } 104 105 onBackPress() { 106 this.textColor = Color.Red 107 console.info('IndexComponent onBackPress') 108 } 109 110 build() { 111 Column() { 112 Text('Hello World') 113 .fontColor(this.textColor) 114 .fontSize(30) 115 .margin(30) 116 }.width('100%') 117 } 118} 119``` 120 121 122 123## onLayout<sup>9+</sup> 124 125onLayout?(children: Array\<LayoutChild\>, constraint: ConstraintSizeOptions): void 126 127Invoked 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** function. 128 129This API is supported in ArkTS widgets. 130 131**Parameters** 132 133| Name | Type | Description | 134| ---------- | -------------------------------------------------------------------------------- | ---------------------- | 135| children | Array\<[LayoutChild](#layoutchild9)\> | Child component layout information. | 136| constraint | [ConstraintSizeOptions](../reference/arkui-ts/ts-types.md#constraintsizeoptions) | Size constraint information of the parent component.| 137 138## onMeasure<sup>9+</sup> 139 140onMeasure?(children: Array\<LayoutChild\>, constraint: ConstraintSizeOptions): void 141 142Invoked when the custom component needs to determine its size. 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 function. 143 144This API is supported in ArkTS widgets. 145 146**Parameters** 147 148| Name | Type | Description | 149| ---------- | -------------------------------------------------------------------------------- | ---------------------- | 150| children | Array\<[LayoutChild](#layoutchild9)\> | Child component layout information. | 151| constraint | [ConstraintSizeOptions](../reference/arkui-ts/ts-types.md#constraintsizeoptions) | Size constraint information of the parent component.| 152 153## LayoutChild<sup>9+</sup> 154 155Provides the child component layout information. 156 157This API is supported in ArkTS widgets. 158 159| Name | Type | Description | 160| ---------- | ----------------------------------------------------------------------------------------------------------- | -------------------------------------- | 161| name | string | Name of the child component. | 162| id | string | ID of the child component. | 163| constraint | [ConstraintSizeOptions](../reference/arkui-ts/ts-types.md#constraintsizeoptions) | Size constraint of the child component. | 164| borderInfo | [LayoutBorderInfo](#layoutborderinfo9) | Border information of the child component. | 165| position | [Position](../reference/arkui-ts/ts-types.md#position) | Position coordinates of the child component. | 166| measure | (childConstraint: [ConstraintSizeOptions](../reference/arkui-ts/ts-types.md#constraintsizeoptions)) => void | Method called to apply the size constraint to the child component.| 167| layout | (LayoutInfo: [LayoutInfo](#layoutinfo9)) => void | Method called to apply the layout information to the child component.| 168 169## LayoutBorderInfo<sup>9+</sup> 170 171Provides the border information of the child component. 172 173This API is supported in ArkTS widgets. 174 175| Name | Type | Description | 176| ----------- | ---------------------------------------------------------- | ---------------------------------------------- | 177| borderWidth | [EdgeWidths](../reference/arkui-ts/ts-types.md#edgewidths) | Edge widths in different directions of the child component.| 178| margin | [Margin](../reference/arkui-ts/ts-types.md#margin) | Margin areas in different directions of the child component. | 179| padding | [Padding](../reference/arkui-ts/ts-types.md#padding) | Padding areas in different directions of the child component. | 180 181## LayoutInfo<sup>9+</sup> 182 183Provides the layout information of the child component. 184 185This API is supported in ArkTS widgets. 186 187| Name | Type | Description | 188| ---------- | -------------------------------------------------------------------------------- | ---------------- | 189| position | [Position](../reference/arkui-ts/ts-types.md#position) | Position coordinates of the child component.| 190| constraint | [ConstraintSizeOptions](../reference/arkui-ts/ts-types.md#constraintsizeoptions) | Size constraint of the child component.| 191 192Example 3: 193 194```ts 195// xxx.ets 196@Entry 197@Component 198struct Index { 199 build() { 200 Column() { 201 CustomLayout() { 202 ForEach([1, 2, 3], (index) => { 203 Text('Sub' + index) 204 .fontSize(30) 205 .borderWidth(2) 206 }) 207 } 208 } 209 } 210} 211 212 213@Component 214struct CustomLayout { 215 @BuilderParam builder: () => {} 216 217 onLayout(children: Array<LayoutChild>, constraint: ConstraintSizeOptions) { 218 let pos = 0 219 children.forEach((child) => { 220 child.layout({ position: { x: pos, y: pos }, constraint: constraint }) 221 pos += 100 222 }) 223 } 224 225 onMeasure(children: Array<LayoutChild>, constraint: ConstraintSizeOptions) { 226 let size = 100 227 children.forEach((child) => { 228 child.measure({ minHeight: size, minWidth: size, maxWidth: size, maxHeight: size }) 229 size += 50 230 }) 231 } 232 233 build() { 234 this.builder() 235 } 236} 237``` 238 239 240
