1# 自定义组件的生命周期 2 3 4自定义组件的生命周期回调函数用于通知用户该自定义组件的生命周期，这些回调函数是私有的，在运行时由开发框架在特定的时间进行调用，不能从应用程序中手动调用这些回调函数。 5 6 7>**说明：** 8> 9>允许在生命周期函数中使用Promise和异步回调函数，比如网络资源获取，定时器设置等； 10 11 12## aboutToAppear 13 14aboutToAppear?(): void 15 16aboutToAppear函数在创建自定义组件的新实例后，在执行其build()函数之前执行。允许在aboutToAppear函数中改变状态变量，更改将在后续执行build()函数中生效。 17 18从API version 9开始，该接口支持在ArkTS卡片中使用。 19 20## aboutToDisappear 21 22aboutToDisappear?(): void 23 24aboutToDisappear函数在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量，特别是\@Link变量的修改可能会导致应用程序行为不稳定。 25 26从API version 9开始，该接口支持在ArkTS卡片中使用。 27 28## onPageShow 29 30onPageShow?(): void 31 32页面每次显示时触发一次，包括路由过程、应用进入前台等场景，仅\@Entry装饰的自定义组件生效。 33 34 35## onPageHide 36 37onPageHide?(): void 38 39页面每次隐藏时触发一次，包括路由过程、应用进入前后台等场景，仅\@Entry装饰的自定义组件生效。 40 41 42## onBackPress 43 44onBackPress?(): void 45 46当用户点击返回按钮时触发，仅\@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 83 84 85## onLayout<sup>9+</sup> 86 87onLayout?(children: Array<LayoutChild>, constraint: ConstraintSizeOptions): void 88 89框架会在自定义组件布局时，将该自定义组件的子节点信息和自身的尺寸范围通过onLayout传递给该自定义组件。不允许在onLayout函数中改变状态变量。 90 91从API version 9开始，该接口支持在ArkTS卡片中使用。 92 93**参数：** 94 95| 参数名 | 类型 | 说明 | 96| ---------- | ---------------------------------------- | ---------------- | 97| children | Array<[LayoutChild](#layoutchild9)> | 子组件布局信息。 | 98| constraint | [ConstraintSizeOptions](ts-types.md#constraintsizeoptions) | 父组件constraint信息。 | 99 100 101## onMeasure<sup>9+</sup> 102 103onMeasure?(children: Array<LayoutChild>, constraint: ConstraintSizeOptions): void 104 105框架会在自定义组件确定尺寸时，将该自定义组件的子节点信息和自身的尺寸范围通过onMeasure传递给该自定义组件。不允许在onMeasure函数中改变状态变量。 106 107从API version 9开始，该接口支持在ArkTS卡片中使用。 108 109**参数：** 110 111| 参数名 | 类型 | 说明 | 112| ---------- | ---------------------------------------- | ---------------- | 113| children | Array<[LayoutChild](#layoutchild9)> | 子组件布局信息。 | 114| constraint | [ConstraintSizeOptions](ts-types.md#constraintsizeoptions) | 父组件constraint信息。 | 115 116 117## LayoutChild<sup>9+</sup> 118 119子组件布局信息。 120 121从API version 9开始，该接口支持在ArkTS卡片中使用。 122 123| 参数 | 参数类型 | 描述 | 124| ---------- | ---------------------------------------- | ------------------- | 125| name | string | 子组件名称。 | 126| id | string | 子组件id。 | 127| constraint | [ConstraintSizeOptions](ts-types.md#constraintsizeoptions) | 子组件约束尺寸。 | 128| borderInfo | [LayoutBorderInfo](#layoutborderinfo9) | 子组件border信息。 | 129| position | [Position](ts-types.md#position) | 子组件位置坐标。 | 130| measure | (childConstraint:) => void | 调用此方法对子组件的尺寸范围进行限制。 | 131| layout | (LayoutInfo： [LayoutInfo](#layoutinfo9)) => void | 调用此方法对子组件的位置信息进行限制。 | 132 133 134## LayoutBorderInfo<sup>9+</sup> 135 136子组件border信息。 137 138从API version 9开始，该接口支持在ArkTS卡片中使用。 139 140| 参数 | 参数类型 | 描述 | 141| ----------- | ------------------------------------ | ----------------------- | 142| borderWidth | [EdgeWidths](ts-types.md#edgewidths) | 边框宽度类型，用于描述组件边框不同方向的宽度。 | 143| margin | [Margin](ts-types.md#margin) | 外边距类型，用于描述组件不同方向的外边距。 | 144| padding | [Padding](ts-types.md#padding) | 内边距类型，用于描述组件不同方向的内边距。 | 145 146 147## LayoutInfo<sup>9+</sup> 148 149子组件layout信息。 150 151从API version 9开始，该接口支持在ArkTS卡片中使用。 152 153| 参数 | 参数类型 | 描述 | 154| ---------- | ---------------------------------------- | -------- | 155| position | [Position](ts-types.md#position) | 子组件位置坐标。 | 156| constraint | [ConstraintSizeOptions](ts-types.md#constraintsizeoptions) | 子组件约束尺寸。 | 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 205
