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 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/customLayout.png differ 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 970076fbc3bdb74596a565cf1090f9765d01d4bf..2d9fdee2d6464061757439cd35fdf9ea5d7745ba 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 +## onLayout9+ onLayout?(children: Array, constraint: [ConstraintSizeOptions](../reference/arkui-ts/ts-types.md#constraintsizeoptions)): void 框架会在自定义组件布局时,将该自定义组件的子节点信息和自身的尺寸范围通过onLayout传递给该自定义组件。不允许在onLayout函数中改变状态变量。 -## onMeasure +## onMeasure9+ onMeasure?(children: Array, 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, constraint: ConstraintSizeOptions) { + let pos = 0 + children.forEach((child) => { + child.layout({ position: { x: pos, y: pos }, constraint: constraint }) + pos += 100; + }) + } + + onMeasure(children: Array, 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) + +## LayoutChild9+ + +子组件布局信息 + +| 参数 | 参数类型 | 描述 | +| ---------- | ----------------------------------------------------------------------------------------------------------- | ---------------- | +| 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 | 子组件位置坐标 | + +## LayoutBorderInfo9+ + +子组件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) | 内边距类型,用于描述组件不同方向的内边距 | + +## LayoutInfo9+ + +子组件layout信息 + +| 参数 | 参数类型 | 描述 | +| ---------- | -------------------------------------------------------------------------------- | -------------- | +| position | [Position](../reference/arkui-ts/ts-types.md#position) | 子组件位置坐标 | +| constraint | [ConstraintSizeOptions](../reference/arkui-ts/ts-types.md#constraintsizeoptions) | 子组件约束尺寸 |