From f0051c77f34ac924b5c090e3b3daedff6e67f217 Mon Sep 17 00:00:00 2001 From: zoulinken Date: Fri, 18 Aug 2023 11:30:20 +0800 Subject: [PATCH] update custom Layout fuction Signed-off-by: zoulinken Change-Id: Ic81e7dcff876373870f9b5e3c17a546a6c2e41d6 --- .../arkui-ts/figures/custom_layout10.png | Bin 0 -> 22316 bytes .../arkui-ts/ts-custom-component-lifecycle.md | 222 +++++++++++++++--- 2 files changed, 187 insertions(+), 35 deletions(-) create mode 100644 zh-cn/application-dev/reference/arkui-ts/figures/custom_layout10.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/custom_layout10.png b/zh-cn/application-dev/reference/arkui-ts/figures/custom_layout10.png new file mode 100644 index 0000000000000000000000000000000000000000..21b248c0872ca6d415d73caca1bb07489f35302f GIT binary patch literal 22316 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 +## onLayout9+(deprecated) onLayout?(children: Array<LayoutChild>, constraint: ConstraintSizeOptions): void -框架会在自定义组件布局时，将该自定义组件的子节点信息和自身的尺寸范围通过onLayout传递给该自定义组件。不允许在onLayout函数中改变状态变量。 +ArkUI框架会在自定义组件布局时，将该自定义组件的子节点信息和自身的尺寸范围通过onLayout传递给该自定义组件。不允许在onLayout函数中改变状态变量。 -从API version 9开始，该接口支持在ArkTS卡片中使用。 +该接口从API version 9开始支持，从API version 10开始废弃，推荐使用[onPlaceChildren](#onplacechildren10)替代。 **参数：** -| 参数名 | 类型 | 说明 | -| ---------- | ---------------------------------------- | ---------------- | -| children | Array<[LayoutChild](#layoutchild9)> | 子组件布局信息。 | +| 参数名 | 类型 | 说明 | +|------------|------------------------------------------------------------|------------------| +| children | Array<[LayoutChild](#layoutchild9)> | 子组件布局信息。 | | constraint | [ConstraintSizeOptions](ts-types.md#constraintsizeoptions) | 父组件constraint信息。 | +## onPlaceChildren10+ + +onPlaceChildren?(selfLayoutInfo: GeometryInfo, children: Array<Layoutable>, constraint: ConstraintSizeOptions): +void + +ArkUI框架会在自定义组件布局时，将该自定义组件的子节点自身的尺寸范围通过onPlaceChildren传递给该自定义组件。不允许在onPlaceChildren函数中改变状态变量。 -## onMeasure9+ +从API version 10开始，该接口支持在ArkTS卡片中使用。 + +**参数：** + +| 参数名 | 类型 | 说明 | +|----------------|------------------------------------------------------------|------------------| +| selfLayoutInfo | [GeometryInfo](#GeometryInfo10) | 父组件布局信息。 | +| children | Array<[Layoutable](#Layoutable10)> | 子组件布局信息。 | +| constraint | [ConstraintSizeOptions](ts-types.md#constraintsizeoptions) | 父组件constraint信息。 | + +## onMeasure9+(deprecated) onMeasure?(children: Array<LayoutChild>, constraint: ConstraintSizeOptions): void -框架会在自定义组件确定尺寸时，将该自定义组件的子节点信息和自身的尺寸范围通过onMeasure传递给该自定义组件。不允许在onMeasure函数中改变状态变量。 +ArkUI框架会在自定义组件确定尺寸时，将该自定义组件的子节点信息和自身的尺寸范围通过onMeasure传递给该自定义组件。不允许在onMeasure函数中改变状态变量。 -从API version 9开始，该接口支持在ArkTS卡片中使用。 +该接口从API version 9开始支持，从API version 10开始废弃，推荐使用[onMeasureSize](#onmeasuresize10)替代。 **参数：** -| 参数名 | 类型 | 说明 | -| ---------- | ---------------------------------------- | ---------------- | -| children | Array<[LayoutChild](#layoutchild9)> | 子组件布局信息。 | +| 参数名 | 类型 | 说明 | +|------------|------------------------------------------------------------|------------------| +| children | Array<[LayoutChild](#layoutchild9)> | 子组件布局信息。 | | constraint | [ConstraintSizeOptions](ts-types.md#constraintsizeoptions) | 父组件constraint信息。 | +## onMeasureSize10+ + +onMeasureSize?(selfLayoutInfo: GeometryInfo, children: Array<Measurable>, constraint: ConstraintSizeOptions):SizeResult + +ArkUI框架会在自定义组件确定尺寸时，将该自定义组件的节点信息和自身的尺寸范围通过onMeasure传递给开发者。不允许在onMeasureSize函数中改变状态变量。 + +从API version 10开始，该接口支持在ArkTS卡片中使用。 + +**参数：** + +| 参数名 | 类型 | 说明 | +|----------------|------------------------------------------------------------|------------------| +| selfLayoutInfo | [GeometryInfo](#geometryinfo10) | 父组件布局信息。 | +| children | Array<[Measurable](#measurable10)> | 子组件布局信息。 | +| constraint | [ConstraintSizeOptions](ts-types.md#constraintsizeoptions) | 父组件constraint信息。 | + ## onRecycle10+ onRecycle?(params: { [key: string]: unknown }): void @@ -123,9 +155,14 @@ onRecycle?(params: { [key: string]: unknown }): void **参数：** | 参数名 | 类型 | 说明 | -| ------ | -------------------------- | ---------- | -| params | { [key: string]: unknown } | 自定义组件的构造参数 | +|--------|----------------------------|------------| +| params | { [key: string]: unknown } | 自定义组件的构造参数。| +> **说明：** +> +>- 自定义布局暂不支持LazyForEach写法 +>- 使用builder形式的自定义布局创建，自定义组件的build()方法内只允许存在this.builder()，即示例的推荐用法 +>- 子组件设置的位置信息和尺寸信息，优先级小于onMeasureSize设置的尺寸信息和onPlaceChildren设置的位置信息 ```ts // xxx.ets @@ -170,48 +207,46 @@ struct Child { } ``` -## LayoutChild9+ +## LayoutChild9+(deprecated) 子组件布局信息。 -从API version 9开始，该接口支持在ArkTS卡片中使用。 +从API version 9开始，从API version 10开始废弃，该接口支持在ArkTS卡片中使用。 -| 参数 | 参数类型 | 描述 | -| ---------- | ---------------------------------------- | ------------------- | -| name | string | 子组件名称。 | -| id | string | 子组件id。 | -| constraint | [ConstraintSizeOptions](ts-types.md#constraintsizeoptions) | 子组件约束尺寸。 | -| borderInfo | [LayoutBorderInfo](#layoutborderinfo9) | 子组件border信息。 | -| position | [Position](ts-types.md#position) | 子组件位置坐标。 | -| measure | (childConstraint:) => void | 调用此方法对子组件的尺寸范围进行限制。 | -| layout | (LayoutInfo： [LayoutInfo](#layoutinfo9)) => void | 调用此方法对子组件的位置信息进行限制。 | +| 参数 | 参数类型 | 描述 | +|------------|--------------------------------------------------------------------|---------------------| +| name | string | 子组件名称。 | +| id | string | 子组件id。 | +| constraint | [ConstraintSizeOptions](ts-types.md#constraintsizeoptions) | 子组件约束尺寸。 | +| borderInfo | [LayoutBorderInfo](#layoutborderinfo9) | 子组件border信息。 | +| position | [Position](ts-types.md#position) | 子组件位置坐标。 | +| measure | (childConstraint:) => void | 调用此方法对子组件的尺寸范围进行限制。 | +| layout | (LayoutInfo： [LayoutInfo](#layoutinfo9)) => void | 调用此方法对子组件的位置信息进行限制。 | -## LayoutBorderInfo9+ +## LayoutBorderInfo9+(deprecated) 子组件border信息。 -从API version 9开始，该接口支持在ArkTS卡片中使用。 +从API version 9开始，从API version 10开始废弃，该接口支持在ArkTS卡片中使用。 | 参数 | 参数类型 | 描述 | -| ----------- | ------------------------------------ | ----------------------- | +|-------------|--------------------------------------|-------------------------| | borderWidth | [EdgeWidths](ts-types.md#edgewidths) | 边框宽度类型，用于描述组件边框不同方向的宽度。 | | margin | [Margin](ts-types.md#margin) | 外边距类型，用于描述组件不同方向的外边距。 | | padding | [Padding](ts-types.md#padding) | 内边距类型，用于描述组件不同方向的内边距。 | - -## LayoutInfo9+ +## LayoutInfo9+(deprecated) 子组件layout信息。 -从API version 9开始，该接口支持在ArkTS卡片中使用。 +从API version 9开始，从API version 10开始废弃，该接口支持在ArkTS卡片中使用。 -| 参数 | 参数类型 | 描述 | -| ---------- | ---------------------------------------- | -------- | -| position | [Position](ts-types.md#position) | 子组件位置坐标。 | +| 参数 | 参数类型 | 描述 | +|------------|------------------------------------------------------------|----------| +| position | [Position](ts-types.md#position) | 子组件位置坐标。 | | constraint | [ConstraintSizeOptions](ts-types.md#constraintsizeoptions) | 子组件约束尺寸。 | - ```ts // xxx.ets @Entry @@ -258,3 +293,120 @@ struct CustomLayout { ``` ![zh-cn_image_0000001511900496](figures/zh-cn_image_0000001511900496.png) + +## GeometryInfo10+ + +父组件布局信息。 + +从API version 10开始支持，该接口支持在ArkTS卡片中使用。 + +| 参数 | 参数类型 | 描述 | +|-------------|-----------|---------------------| +| borderWidth | [EdgeWidth](ts-types.md#edgewidths) | 父组件边框宽度。 | +| margin | [Margin](ts-types.md#margin) | 父组件margin信息。 | +| padding | [Padding](ts-types.md#padding) | 父组件padding信息。 | + + +## Layoutable10+ + +子组件布局信息。 + +从API version 10开始支持，该接口支持在ArkTS卡片中使用。 + +| 参数 | 参数类型 | 描述 | +|------------|---------------------------------------------------------|---------------------| +| measureResult| [MeasureResult](#measureresult10+) | 子组件测量后的尺寸信息。 | +| layout | ([Position](ts-types.md#position)) => void | 调用此方法对子组件的位置信息进行限制。 | + +## Measurable10+ + +子组件位置信息。 + +从API version 10开始支持，该接口支持在ArkTS卡片中使用。 + +| 参数 | 参数类型 | 描述 | +|------------|----------------------------------------------------------------------------------|---------------------------------------| +| measure | (childConstraint:) => [MeasureResult](#measureresult10+) | 调用此方法对子组件的尺寸范围进行限制。
返回值：子组件测量后的尺寸。 | + +## MeasureResult10+ + +测量后的组件布局信息。 + +从API version 10开始，该接口支持在ArkTS卡片中使用。 + +| 参数 | 参数类型 | 描述 | +|--------|--------|-------| +| width | Number | 测量后的宽。 | +| height | Number | 测量后的高。 | + + +## SizeResult10+ + +组件尺寸信息。 + +从API version 10开始，该接口支持在ArkTS卡片中使用。 + +| 参数 | 参数类型 | 描述 | +|--------|--------|-------| +| width | Number | 测量后的宽。 | +| height | Number | 测量后的高。 | +``` +// xxx.ets +@Entry +@Component +struct Index { + @State en :boolean = true + @State list : number[] = [1,2,3] + + build() { + Column() { + CustomLayout() + { + ForEach(this.list, (index) => { //暂不支持lazyForEach的写法 + Text('S' + index) + .fontSize(30) + .width(100).height(100) + .borderWidth(2) + .offset({x:10, y:20}) + }) + } + Button('添加一组数据').onClick(() => { + this.list.push(this.list.length + 1) + }) + } + } +} + + +@Component +struct CustomLayout { + @BuilderParam builder: () => {}; + @State startSize: number = 100; + + onPlaceChildren(selfLayoutInfo: GeometryInfo, children: Array, constraint: ConstraintSizeOptions) { + console.info("selfLayoutInfo width = " + selfLayoutInfo.width + "---height = " + selfLayoutInfo.height) + let startPos = 400; + children.forEach((child) => { + let pos = startPos - child.measureResult.height; + child.layout({ x: pos, y: pos }) + }) + } + + onMeasureSize(selfLayoutInfo: GeometryInfo, children: Array, constraint: ConstraintSizeOptions) { + let size = 100; + children.forEach((child) => { + let result: MeasureResult = child.measure({ minHeight: size, minWidth: size, maxWidth: size, maxHeight: size }) + size += result.width/2 + ; + }) + children[0].measure({ minHeight: size, minWidth: size, maxWidth: size, maxHeight: size }) + return { width: 100, height: 400 }; + } + + build() { + this.builder() + } +} +``` + +![custom_layout10.png](figures/custom_layout10.png) \ No newline at end of file -- GitLab