!11037 improve custom layout doc

Merge pull request !11037 from guozejun/master

zh-cn/application-dev/ui/ui-ts-custom-component-lifecycle-callbacks.md

@@ -116,24 +116,110 @@ struct IndexComponent {
 
 ![lifecycle](figures/lifecycle.PNG)
 
-## onLayout
+## onLayout<sup>9+</sup>
 
-onLayout?(children: Array<LayoutChild>, constraint: [ConstraintSizeOptions](../reference/arkui-ts/ts-types.md#constraintsizeoptions)): void
+onLayout?(children: Array\<LayoutChild\>, constraint: ConstraintSizeOptions): void
 
 框架会在自定义组件布局时，将该自定义组件的子节点信息和自身的尺寸范围通过onLayout传递给该自定义组件。不允许在onLayout函数中改变状态变量。
 
-## onMeasure
+**参数：**
 
-onMeasure?(children: Array<LayoutChild>, constraint: [ConstraintSizeOptions](../reference/arkui-ts/ts-types.md#constraintsizeoptions)): void
+| 参数名     | 类型                                                                             | 说明                   |
+| ---------- | -------------------------------------------------------------------------------- | ---------------------- |
+| children   | Array\<[LayoutChild](#layoutchild9)\>                                            | 子组件布局信息。       |
+| constraint | [ConstraintSizeOptions](../reference/arkui-ts/ts-types.md#constraintsizeoptions) | 父组件constraint信息。 |
+
+## onMeasure<sup>9+</sup>
+
+onMeasure?(children: Array\<LayoutChild\>, constraint: ConstraintSizeOptions): void
 
 框架会在自定义组件确定尺寸时，将该自定义组件的子节点信息和自身的尺寸范围通过onMeasure传递给该自定义组件。不允许在onMeasure函数中改变状态变量。
 
-## LayoutChild类型说明
+**参数：**
+
+| 参数名     | 类型                                                                             | 说明                   |
+| ---------- | -------------------------------------------------------------------------------- | ---------------------- |
+| children   | Array\<[LayoutChild](#layoutchild9)\>                                            | 子组件布局信息。       |
+| constraint | [ConstraintSizeOptions](../reference/arkui-ts/ts-types.md#constraintsizeoptions) | 父组件constraint信息。 |
+
+## LayoutChild<sup>9+</sup>
+
+子组件布局信息。
+
+| 参数       | 参数类型                                                                                                    | 描述                                   |
+| ---------- | ----------------------------------------------------------------------------------------------------------- | -------------------------------------- |
+| name       | string                                                                                                      | 子组件名称。                           |
+| id         | string                                                                                                      | 子组件id。                             |
+| constraint | [ConstraintSizeOptions](../reference/arkui-ts/ts-types.md#constraintsizeoptions)                            | 子组件约束尺寸。                       |
+| borderInfo | [LayoutBorderInfo](#layoutborderinfo9)                                                                      | 子组件border信息。                     |
+| position   | [Position](../reference/arkui-ts/ts-types.md#position)                                                      | 子组件位置坐标。                       |
+| measure    | (childConstraint: [ConstraintSizeOptions](../reference/arkui-ts/ts-types.md#constraintsizeoptions)) => void | 调用此方法对子组件的尺寸范围进行限制。 |
+| layout     | (LayoutInfo： [LayoutInfo](#layoutinfo9)) => void                                                           | 调用此方法对子组件的位置信息进行限制。 |
+
+## LayoutBorderInfo<sup>9+</sup>
+
+子组件border信息。
+
+| 参数        | 参数类型                                                   | 描述                                           |
+| ----------- | ---------------------------------------------------------- | ---------------------------------------------- |
+| borderWidth | [EdgeWidths](../reference/arkui-ts/ts-types.md#edgewidths) | 边框宽度类型，用于描述组件边框不同方向的宽度。 |
+| margin      | [Margin](../reference/arkui-ts/ts-types.md#margin)         | 外边距类型，用于描述组件不同方向的外边距。     |
+| padding     | [Padding](../reference/arkui-ts/ts-types.md#padding)       | 内边距类型，用于描述组件不同方向的内边距。     |
+
+## LayoutInfo<sup>9+</sup>
+
+子组件layout信息。
+
+| 参数       | 参数类型                                                                         | 描述             |
+| ---------- | -------------------------------------------------------------------------------- | ---------------- |
+| position   | [Position](../reference/arkui-ts/ts-types.md#position)                           | 子组件位置坐标。 |
+| constraint | [ConstraintSizeOptions](../reference/arkui-ts/ts-types.md#constraintsizeoptions) | 子组件约束尺寸。 |
+
+**示例3：**
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct Index {
+  build() {
+    Column() {
+      CustomLayout() {
+        ForEach([1, 2, 3], (index) => {
+          Text("Sub" + index)
+            .fontSize(30)
+            .borderWidth(2)
+        })
+      }
+    }
+  }
+}
+
+
+@Component
+struct CustomLayout {
+  @BuilderParam builder: () => {}
+
+  onLayout(children: Array<LayoutChild>, constraint: ConstraintSizeOptions) {
+    let pos = 0
+    children.forEach((child) => {
+      child.layout({ position: { x: pos, y: pos }, constraint: constraint })
+      pos += 100;
+    })
+  }
+
+  onMeasure(children: Array<LayoutChild>, constraint: ConstraintSizeOptions) {
+    let size = 100
+    children.forEach((child) => {
+      child.measure({ minHeight: size, minWidth: size, maxWidth: size, maxHeight: size })
+      size += 50
+    })
+  }
+
+  build() {
+    this.builder()
+  }
+}
+```
 
-| 参数    | 参数类型   |   描述       |
-| ----- | ----------- | ----------- |
-| name | string |  子组件名称   |
-| id | string |  子组件id    |
-| constraint | [ConstraintSizeOptions](../reference/arkui-ts/ts-types.md#constraintsizeoptions) |   子组件约束尺寸  |
-| borderInfo | { borderWidth: number, margin: [Margin](../reference/arkui-ts/ts-types.md#margin), padding: [Padding](../reference/arkui-ts/ts-types.md#padding) } |  子组件边框样式  |
-| position | { x: number, y: number } |  子组件位置坐标   |
+![customlayout](figures/customLayout.png)