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 4ca95460bcf93cc1c07c5ea44f8de0f412d43f86..e51d8311d5fe9ade34875c8facb83feb81c59659 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) }