From dc690ee89ee1641d96935c7d1b121b64e29c21be Mon Sep 17 00:00:00 2001
From: guozejun <guozejun@huawei.com>
Date: Wed, 26 Oct 2022 10:43:14 +0800
Subject: [PATCH] improve custom layout doc

Signed-off-by: guozejun <guozejun@huawei.com>
Change-Id: I623935306711ca2bad41bedcbb2a68f42cd12e60
---
 .../ui/figures/customLayout.png               | Bin 0 -> 13538 bytes
 ...ts-custom-component-lifecycle-callbacks.md |  92 ++++++++++++++++--
 2 files changed, 82 insertions(+), 10 deletions(-)
 create mode 100644 zh-cn/application-dev/ui/figures/customLayout.png

diff --git a/zh-cn/application-dev/ui/figures/customLayout.png b/zh-cn/application-dev/ui/figures/customLayout.png
new file mode 100644
index 0000000000000000000000000000000000000000..10b8ed02016616d8fdc91f37cc1d2f8d1379842f
GIT binary patch
literal 13538
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
Y?<V?#x<DIv=Lce_XL6(Br@O!YH-e`xRsaA1

literal 0
HcmV?d00001

diff --git a/zh-cn/application-dev/ui/ui-ts-custom-component-lifecycle-callbacks.md b/zh-cn/application-dev/ui/ui-ts-custom-component-lifecycle-callbacks.md
index 970076fbc3..2d9fdee2d6 100644
--- a/zh-cn/application-dev/ui/ui-ts-custom-component-lifecycle-callbacks.md
+++ b/zh-cn/application-dev/ui/ui-ts-custom-component-lifecycle-callbacks.md
@@ -116,24 +116,96 @@ 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传递给该自定义组件。不允许在onLayout函数中改变状态变量。
 
-## onMeasure
+## onMeasure<sup>9+</sup>
 
 onMeasure?(children: Array<LayoutChild>, constraint: [ConstraintSizeOptions](../reference/arkui-ts/ts-types.md#constraintsizeoptions)): void
 
 框架会在自定义组件确定尺寸时，将该自定义组件的子节点信息和自身的尺寸范围通过onMeasure传递给该自定义组件。不允许在onMeasure函数中改变状态变量。
 
-## LayoutChild类型说明
+**示例3：**
 
-| 参数    | 参数类型   |   描述       |
-| ----- | ----------- | ----------- |
-| 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 } |  子组件位置坐标   |
+```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()
+  }
+}
+```
+
+![customlayout](figures/customLayout.png)
+
+## 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) | 子组件约束尺寸 |
-- 
GitLab