1# 自定义组件的生命周期 2 3自定义组件的生命周期回调函数用于通知用户该自定义组件的生命周期，这些回调函数是私有的，在运行时由开发框架在特定的时间进行调用，不能从应用程序中手动调用这些回调函数。 4 5>**说明：** 6> 7>- 本模块首批接口从API version 7开始支持，后续版本的新增接口，采用上角标单独标记接口的起始版本。 8>- 允许在生命周期函数中使用Promise和异步回调函数，比如网络资源获取，定时器设置等。 9 10 11## aboutToAppear 12 13aboutToAppear?(): void 14 15aboutToAppear函数在创建自定义组件的新实例后，在执行其build()函数之前执行。允许在aboutToAppear函数中改变状态变量，更改将在后续执行build()函数中生效。 16 17从API version 9开始，该接口支持在ArkTS卡片中使用。 18 19## aboutToDisappear 20 21aboutToDisappear?(): void 22 23aboutToDisappear函数在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量，特别是\@Link变量的修改可能会导致应用程序行为不稳定。 24 25从API version 9开始，该接口支持在ArkTS卡片中使用。 26 27## onPageShow 28 29onPageShow?(): void 30 31页面每次显示时触发一次，包括路由过程、应用进入前台等场景，仅\@Entry装饰的自定义组件生效。 32 33 34## onPageHide 35 36onPageHide?(): void 37 38页面每次隐藏时触发一次，包括路由过程、应用进入前后台等场景，仅\@Entry装饰的自定义组件生效。 39 40 41## onBackPress 42 43onBackPress?(): void | boolean 44 45当用户点击返回按钮时触发，仅\@Entry装饰的自定义组件生效。 46 47 48```ts 49// xxx.ets 50@Entry 51@Component 52struct IndexComponent { 53 @State textColor: Color = Color.Black; 54 55 onPageShow() { 56 this.textColor = Color.Blue; 57 console.info('IndexComponent onPageShow'); 58 } 59 60 onPageHide() { 61 this.textColor = Color.Transparent; 62 console.info('IndexComponent onPageHide'); 63 } 64 65 onBackPress() { 66 this.textColor = Color.Red; 67 console.info('IndexComponent onBackPress'); 68 } 69 70 build() { 71 Column() { 72 Text('Hello World') 73 .fontColor(this.textColor) 74 .fontSize(30) 75 .margin(30) 76 }.width('100%') 77 } 78} 79``` 80 81 82 83 84## onLayout<sup>9+</sup> 85 86onLayout?(children: Array<LayoutChild>, constraint: ConstraintSizeOptions): void 87 88框架会在自定义组件布局时，将该自定义组件的子节点信息和自身的尺寸范围通过onLayout传递给该自定义组件。不允许在onLayout函数中改变状态变量。 89 90从API version 9开始，该接口支持在ArkTS卡片中使用。 91 92**参数：** 93 94| 参数名 | 类型 | 说明 | 95| ---------- | ---------------------------------------- | ---------------- | 96| children | Array<[LayoutChild](#layoutchild9)> | 子组件布局信息。 | 97| constraint | [ConstraintSizeOptions](ts-types.md#constraintsizeoptions) | 父组件constraint信息。 | 98 99 100## onMeasure<sup>9+</sup> 101 102onMeasure?(children: Array<LayoutChild>, constraint: ConstraintSizeOptions): void 103 104框架会在自定义组件确定尺寸时，将该自定义组件的子节点信息和自身的尺寸范围通过onMeasure传递给该自定义组件。不允许在onMeasure函数中改变状态变量。 105 106从API version 9开始，该接口支持在ArkTS卡片中使用。 107 108**参数：** 109 110| 参数名 | 类型 | 说明 | 111| ---------- | ---------------------------------------- | ---------------- | 112| children | Array<[LayoutChild](#layoutchild9)> | 子组件布局信息。 | 113| constraint | [ConstraintSizeOptions](ts-types.md#constraintsizeoptions) | 父组件constraint信息。 | 114 115## aboutToReuse<sup>10+</sup> 116 117aboutToReuse?(params: { [key: string]: unknown }): void 118 119当一个可复用的自定义组件从复用缓存中重新加入到节点树时，触发aboutToReuse生命周期回调，并将组件的构造参数传递给aboutToReuse。 120 121从API version 10开始，该接口支持在ArkTS卡片中使用。 122 123**参数：** 124 125| 参数名 | 类型 | 说明 | 126| ------ | -------------------------- | ---------- | 127| params | { [key: string]: unknown } | 自定义组件的构造参数 | 128 129 130```ts 131// xxx.ets 132@Entry 133@Component 134struct Index { 135 @State message: string = 'Hello World' 136 @State switch: boolean = true 137 138 build() { 139 Column() { 140 Button(this.message) 141 .fontSize(50) 142 .fontWeight(FontWeight.Bold) 143 .onClick(() => { 144 this.switch = !this.switch 145 }) 146 if (this.switch) { 147 Child() 148 } 149 } 150 .height("100%") 151 .width('100%') 152 } 153} 154 155@Reusable 156@Component 157struct Child { 158 aboutToReuse(params: Object) { 159 console.info("Recycle Child") 160 } 161 162 build() { 163 Column() { 164 Text("Child Component") 165 .fontSize(20) 166 } 167 .borderWidth(2) 168 .height(100) 169 } 170} 171``` 172 173## LayoutChild<sup>9+</sup> 174 175子组件布局信息。 176 177从API version 9开始，该接口支持在ArkTS卡片中使用。 178 179| 参数 | 参数类型 | 描述 | 180| ---------- | ---------------------------------------- | ------------------- | 181| name | string | 子组件名称。 | 182| id | string | 子组件id。 | 183| constraint | [ConstraintSizeOptions](ts-types.md#constraintsizeoptions) | 子组件约束尺寸。 | 184| borderInfo | [LayoutBorderInfo](#layoutborderinfo9) | 子组件border信息。 | 185| position | [Position](ts-types.md#position) | 子组件位置坐标。 | 186| measure | (childConstraint:) => void | 调用此方法对子组件的尺寸范围进行限制。 | 187| layout | (LayoutInfo： [LayoutInfo](#layoutinfo9)) => void | 调用此方法对子组件的位置信息进行限制。 | 188 189 190## LayoutBorderInfo<sup>9+</sup> 191 192子组件border信息。 193 194从API version 9开始，该接口支持在ArkTS卡片中使用。 195 196| 参数 | 参数类型 | 描述 | 197| ----------- | ------------------------------------ | ----------------------- | 198| borderWidth | [EdgeWidths](ts-types.md#edgewidths) | 边框宽度类型，用于描述组件边框不同方向的宽度。 | 199| margin | [Margin](ts-types.md#margin) | 外边距类型，用于描述组件不同方向的外边距。 | 200| padding | [Padding](ts-types.md#padding) | 内边距类型，用于描述组件不同方向的内边距。 | 201 202 203## LayoutInfo<sup>9+</sup> 204 205子组件layout信息。 206 207从API version 9开始，该接口支持在ArkTS卡片中使用。 208 209| 参数 | 参数类型 | 描述 | 210| ---------- | ---------------------------------------- | -------- | 211| position | [Position](ts-types.md#position) | 子组件位置坐标。 | 212| constraint | [ConstraintSizeOptions](ts-types.md#constraintsizeoptions) | 子组件约束尺寸。 | 213 214 215```ts 216// xxx.ets 217@Entry 218@Component 219struct Index { 220 build() { 221 Column() { 222 CustomLayout() { 223 ForEach([1, 2, 3], (index: number) => { 224 Text('Sub' + index) 225 .fontSize(30) 226 .borderWidth(2) 227 }) 228 } 229 } 230 } 231} 232 233 234@Component 235struct CustomLayout { 236 @Builder 237 doNothingBuilder() { 238 }; 239 240 @BuilderParam builder: () => void = this.doNothingBuilder; 241 242 onLayout(children: Array<LayoutChild>, constraint: ConstraintSizeOptions) { 243 let pos = 0; 244 children.forEach((child) => { 245 child.layout({ position: { x: pos, y: pos }, constraint: constraint }) 246 pos += 70; 247 }) 248 } 249 250 onMeasure(children: Array<LayoutChild>, constraint: ConstraintSizeOptions) { 251 let size = 100; 252 children.forEach((child) => { 253 child.measure({ minHeight: size, minWidth: size, maxWidth: size, maxHeight: size }) 254 size += 50; 255 }) 256 } 257 258 build() { 259 this.builder() 260 } 261} 262``` 263 264 265
