From 2948a77efb364e1639fa083b5edac5ee54973636 Mon Sep 17 00:00:00 2001 From: limeng Date: Mon, 31 Oct 2022 12:18:53 +0800 Subject: [PATCH] =?UTF-8?q?waterFlow=E7=9A=84=E4=B8=89=E4=B8=AA=E5=85=B3?= =?UTF-8?q?=E8=81=94=E5=B1=9E=E6=80=A7columnsTemplate=E3=80=81rowsTemplate?= =?UTF-8?q?=E3=80=81layoutDirection=E7=9A=84=E7=BA=A6=E6=9D=9F=E5=85=B3?= =?UTF-8?q?=E7=B3=BB=E8=AF=B4=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: limeng --- .../arkui-ts/ts-container-waterflow.md | 37 ++++++++++++++++--- 1 file changed, 32 insertions(+), 5 deletions(-) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-waterflow.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-waterflow.md index 4ca95460bc..e51d8311d5 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-waterflow.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-waterflow.md @@ -25,7 +25,7 @@ WaterFlow(options?: {footer?: CustomBuilder, scroller?: Scroller}) | 参数名 | 参数类型 | 必填 | 参数描述 | | ---------- | ----------------------------------------------- | ------ | -------------------------------------------- | | footer | [CustomBuilder](ts-types.md#custombuilder8) | 否 | 设置WaterFlow尾部组件。 | - | scroller | [Scroller](ts-container-scroll.md#scroller) | 否 | 可滚动组件的控制器，与可滚动组件绑定。 | + | scroller | [Scroller](ts-container-scroll.md#scroller) | 否 | 可滚动组件的控制器，与可滚动组件绑定。
目前瀑布流仅支持Scroller组件的scrollToIndex接口。 | ## 属性 @@ -40,8 +40,21 @@ WaterFlow(options?: {footer?: CustomBuilder, scroller?: Scroller}) | itemConstraintSize | [ConstraintSizeOptions](ts-types.md#constraintsizeoptions) | 设置约束尺寸，子组件布局时，进行尺寸范围限制。 | | columnsGap | Length |设置列与列的间距。
默认值：0| | rowsGap | Length |设置行与行的间距。
默认值：0| -| layoutDirection | [FlexDirection](ts-appendix-enums.md#flexdirection) |设置布局的主轴方向。| +| layoutDirection | [FlexDirection](ts-appendix-enums.md#flexdirection) |设置布局的主轴方向。
默认值：FlexDirection::COLUMN| +WaterFlow组件的layoutDirection、rowsTemplate和columnsTemplate属性之间的相互关系：layoutDirection优先级高于rowsTemplate和columnsTemplate，设定符合布局方向的Template设置、忽略不符合布局方向的Template设置。根据设置情况，可分为以下三种属性设置模式： + +- layoutDirection设置纵向布局（FlexDirection::COLUMN 或 FlexDirection::COLUMN_REVERSE）： + +此时，取影响纵向布局的columnsTemplate设置（如果未设置，取默认值），忽略影响横向布局的rowsTemplate设置。例如columnsTemplate设置为"1fr 1fr"、rowsTemplate设置为"1fr 1fr 1fr"时，展示为纵向的，并且辅轴为均分2列的布局。 + +- layoutDirection设置横向布局（FlexDirection::ROW 或 FlexDirection::ROW_REVERSE）： + +此时，取影响横向布局的rowsTemplate设置（如果未设置，取默认值），忽略纵向布局的columnsTemplate设置。例如columnsTemplate设置为"1fr 1fr"、rowsTemplate设置为"1fr 1fr 1fr"时，展示为横向的，并且辅轴为均分3列的布局。 + +- layoutDirection未设置布局方向： + +此时，布局方向取layoutDirection的默认值：FlexDirection::COLUMN，设定组件为纵向布局。取影响纵向布局的columnsTemplate设置（如果未设置，取默认值），忽略影响横向布局的rowsTemplate设置。例如columnsTemplate设置为"1fr 1fr"、rowsTemplate设置为"1fr 1fr 1fr"时，展示为纵向的，并且辅轴为均分2列的布局。 ## 事件 @@ -79,7 +92,7 @@ export class WaterFlowDataSource implements IDataSource { private listeners: DataChangeListener[] = [] constructor() { - for (let i = 0; i <= 100; i++) { + for (let i = 0; i < 100; i++) { this.dataArray.push(i); } } @@ -202,6 +215,8 @@ struct WaterflowDemo { @State colors: number[] = [0xFFC0CB, 0xDA70D6, 0x6B8E23, 0x6A5ACD, 0x00FFFF, 0x00FF7F] scroller: Scroller = new Scroller(); datasource: WaterFlowDataSource = new WaterFlowDataSource(); + private itemWidthArray: number[] = [] + private itemHeightArray: number[] = [] // 计算flow item宽/高 getSize() { @@ -209,6 +224,18 @@ struct WaterflowDemo { return (ret > this.minSize ? ret : this.minSize) } + // 保存flow item宽/高 + getItemSizeArray() { + for (let i = 0; i < 100; i++) { + this.itemWidthArray.push(this.getSize()); + this.itemHeightArray.push(this.getSize()); + } + } + + aboutToAppear() { + this.getItemSizeArray(); + } + @Builder itemFoot() { Column() { Text(`Footer`) @@ -232,8 +259,8 @@ struct WaterflowDemo { .objectFit(ImageFit.Fill) } } - .width(this.getSize()) - .height(this.getSize()) + .width(this.itemWidthtArray[item1]) + .height(this.itemHeightArray[item1]) .backgroundColor(this.colors[item % 5]) }, item => item) } -- GitLab