diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-waterflow.md b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-waterflow.md
index 72a56a92e0fd09b6d8bc36b5681cfaf81ab36df6..3550369224bbe0826eda3052a18e9515b103c814 100644
--- a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-waterflow.md
+++ b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-waterflow.md
@@ -44,7 +44,7 @@ WaterFlow(options?: WaterFlowOptions)
| 名称 | 类型 | 必填 | 说明 |
| ---------- | ----------------------------------------------- | ------ | -------------------------------------------- |
-| footer | [CustomBuilder](ts-types.md#custombuilder8) | 否 | 设置WaterFlow尾部组件。
**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 |
+| footer | [CustomBuilder](ts-types.md#custombuilder8) | 否 | 设置WaterFlow尾部组件。
**说明：**
使用方法参见[示例1](#示例1使用基本瀑布流)。
**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 |
| footerContent18+ | [ComponentContent](../js-apis-arkui-ComponentContent.md) | 否 | 设置WaterFlow尾部组件。
该参数的优先级高于参数footer，即同时设置footer和footerContent时，以footerContent设置的组件为准。
**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 |
| scroller | [Scroller](ts-container-scroll.md#scroller) | 否 | 可滚动组件的控制器，与可滚动组件绑定。
**说明：**
不允许和其他滚动类组件，如：[ArcList](ts-container-arclist.md)、[List](ts-container-list.md)、[Grid](ts-container-grid.md)、[Scroll](ts-container-scroll.md)和[WaterFlow](ts-container-waterflow.md)绑定同一个滚动控制对象。
**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 |
| sections12+ | [WaterFlowSections](#waterflowsections12) | 否 | 设置FlowItem分组，实现同一个瀑布流组件内部各分组使用不同列数混合布局。
**说明：**
1. 使用分组混合布局时会忽略columnsTemplate和rowsTemplate属性。
2. 使用分组混合布局时不支持单独设置footer，可以使用最后一个分组作为尾部组件。
**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 |
@@ -283,7 +283,7 @@ itemConstraintSize(value: ConstraintSizeOptions)
| 参数名 | 类型 | 必填 | 说明 |
| ------ | ---------------------------------------------------------- | ---- | ---------- |
-| value | [ConstraintSizeOptions](ts-types.md#constraintsizeoptions) | 是 | 约束尺寸。设置小于0的值，参数不生效。
**说明：**
1.同时设置itemConstraintSize和FlowItem的[constraintSize](ts-universal-attributes-size.md#constraintsize)属性时，minWidth/minHeight会取其中的最大值，maxWidth/maxHeight会取其中的最小值，调整后的值作为FlowItem的constraintSize处理。2.只设置itemConstraintSize时，相当于对WaterFlow所有子组件设置了相同的constraintSize。3.itemConstraintSize通过以上两种方式转换成FlowItem的constraintSize后的生效规则与通用属性[constraintSize](./ts-universal-attributes-size.md#constraintsize)相同。|
+| value | [ConstraintSizeOptions](ts-types.md#constraintsizeoptions) | 是 | 约束尺寸。设置小于0的值，参数不生效。
**说明：**
1.同时设置itemConstraintSize和FlowItem的[constraintSize](ts-universal-attributes-size.md#constraintsize)属性时，minWidth/minHeight会取其中的最大值，maxWidth/maxHeight会取其中的最小值，调整后的值作为FlowItem的constraintSize处理。
2.只设置itemConstraintSize时，相当于对WaterFlow所有子组件设置了相同的constraintSize。
3.itemConstraintSize通过以上两种方式转换成FlowItem的constraintSize后的生效规则与通用属性[constraintSize](./ts-universal-attributes-size.md#constraintsize)相同。|
### columnsGap
@@ -643,6 +643,11 @@ export class WaterFlowDataSource implements IDataSource {
// Index.ets
import { WaterFlowDataSource } from './WaterFlowDataSource';
+enum FooterState {
+ Loading = 0,
+ End = 1
+}
+
@Entry
@Component
struct WaterFlowDemo {
@@ -650,6 +655,7 @@ struct WaterFlowDemo {
@State maxSize: number = 180;
@State fontSize: number = 24;
@State colors: number[] = [0xFFC0CB, 0xDA70D6, 0x6B8E23, 0x6A5ACD, 0x00FFFF, 0x00FF7F];
+ @State footerState: FooterState = FooterState.Loading;
scroller: Scroller = new Scroller();
dataSource: WaterFlowDataSource = new WaterFlowDataSource();
private itemWidthArray: number[] = [];
@@ -675,20 +681,39 @@ struct WaterFlowDemo {
@Builder
itemFoot() {
+ // 不要直接用IfElse节点作为footer的根节点。
Column() {
- Text(`Footer`)
- .fontSize(10)
- .backgroundColor(Color.Red)
- .width(50)
- .height(50)
- .align(Alignment.Center)
- .margin({ top: 2 })
+ if (this.footerState == FooterState.Loading) {
+ Text(`加载中...`)
+ .fontSize(10)
+ .backgroundColor(Color.Red)
+ .width(50)
+ .height(50)
+ .align(Alignment.Center)
+ .margin({ top: 2 })
+ } else if (this.footerState == FooterState.End) {
+ Text(`到底啦...`)
+ .fontSize(10)
+ .backgroundColor(Color.Red)
+ .width(50)
+ .height(50)
+ .align(Alignment.Center)
+ .margin({ top: 2 })
+ } else {
+ Text(`Footer`)
+ .fontSize(10)
+ .backgroundColor(Color.Red)
+ .width(50)
+ .height(50)
+ .align(Alignment.Center)
+ .margin({ top: 2 })
+ }
}
}
build() {
Column({ space: 2 }) {
- WaterFlow() {
+ WaterFlow({ footer: this.itemFoot() }) {
LazyForEach(this.dataSource, (item: number) => {
FlowItem() {
Column() {
@@ -700,14 +725,6 @@ struct WaterFlowDemo {
.layoutWeight(1)
}
}
- .onAppear(() => {
- // 即将触底时提前增加数据
- if (item + 20 == this.dataSource.totalCount()) {
- for (let i = 0; i < 100; i++) {
- this.dataSource.addLastItem();
- }
- }
- })
.width('100%')
.height(this.itemHeightArray[item % 100])
.backgroundColor(this.colors[item % 5])
@@ -719,6 +736,19 @@ struct WaterFlowDemo {
.backgroundColor(0xFAEEE0)
.width('100%')
.height('100%')
+ // 触底加载数据
+ .onReachEnd(() => {
+ console.info("onReachEnd")
+ if (this.dataSource.totalCount() > 200) {
+ this.footerState = FooterState.End;
+ return;
+ }
+ setTimeout(() => {
+ for (let i = 0; i < 100; i++) {
+ this.dataSource.addLastItem();
+ }
+ }, 1000)
+ })
.onReachStart(() => {
console.info('waterFlow reach start');
})
@@ -830,11 +860,13 @@ struct ReusableFlowItem {
}
build() {
- Image('res/waterFlowTest(' + this.item % 5 + ').jpg')
- .overlay('N' + this.item, { align: Alignment.Top })
- .objectFit(ImageFit.Fill)
- .width('100%')
- .layoutWeight(1)
+ Column() {
+ Image('res/waterFlowTest(' + this.item % 5 + ').jpg')
+ .overlay('N' + this.item, { align: Alignment.Top })
+ .objectFit(ImageFit.Fill)
+ .width('100%')
+ .layoutWeight(1)
+ }
}
}
@@ -934,44 +966,33 @@ struct WaterFlowDemo {
Button('update')
.height('5%')
.onClick(() => {
- // 在第二个分组增加4个FlowItem，注意保证LazyForEach中数据数量和所有分组itemsCount的和保持一致
- let newSection: SectionOptions = {
- itemsCount: 6,
- crossCount: 3,
- columnsGap: 5,
- rowsGap: 10,
- margin: this.sectionMargin,
- onGetItemMainSizeByIndex: (index: number) => {
- return this.itemHeightArray[index % 100];
- }
- }
+ // 在第一个分组中增加4个FlowItem，注意保证LazyForEach中数据数量和所有分组itemsCount的和保持一致
+ const sections: Array = this.sections.values();
+ let newSection: SectionOptions = sections[0];
this.dataSource.addItem(this.oneColumnSection.itemsCount);
this.dataSource.addItem(this.oneColumnSection.itemsCount + 1);
this.dataSource.addItem(this.oneColumnSection.itemsCount + 2);
this.dataSource.addItem(this.oneColumnSection.itemsCount + 3);
- const result: boolean = this.sections.update(1, newSection);
+ newSection.itemsCount += 4;
+ const result: boolean = this.sections.update(0, newSection);
console.info('update:' + result);
})
.margin({ top: 10, left: 20 })
Button('delete')
.height('5%')
.onClick(() => {
- // 先点击update再点击delete
- let newSection: SectionOptions = {
- itemsCount: 2,
- crossCount: 2,
- columnsGap: 5,
- rowsGap: 10,
- margin: this.sectionMargin,
- onGetItemMainSizeByIndex: (index: number) => {
- return this.itemHeightArray[index % 100];
- }
+ // 在第一个分组中减少4个FlowItem，注意保证LazyForEach中数据数量和所有分组itemsCount的和保持一致
+ const sections: Array = this.sections.values();
+ let newSection: SectionOptions = sections[0];
+ if (newSection.itemsCount < 4) {
+ return;
}
- this.dataSource.deleteItem(this.oneColumnSection.itemsCount);
- this.dataSource.deleteItem(this.oneColumnSection.itemsCount);
- this.dataSource.deleteItem(this.oneColumnSection.itemsCount);
- this.dataSource.deleteItem(this.oneColumnSection.itemsCount);
- this.sections.update(1, newSection);
+ this.dataSource.deleteItem(this.oneColumnSection.itemsCount - 1);
+ this.dataSource.deleteItem(this.oneColumnSection.itemsCount - 2);
+ this.dataSource.deleteItem(this.oneColumnSection.itemsCount - 3);
+ this.dataSource.deleteItem(this.oneColumnSection.itemsCount - 4);
+ newSection.itemsCount -= 4;
+ this.sections.update(0, newSection);
})
.margin({ top: 10, left: 20 })
Button('values')
@@ -992,8 +1013,8 @@ struct WaterFlowDemo {
ReusableFlowItem({ item: item })
}
.width('100%')
- // 以onGetItemMainSizeByIndex为准
- // .height(this.itemHeightArray[item % 100])
+ // 同时设置onGetItemMainSizeByIndex和height属性时，主轴大小以onGetItemMainSizeByIndex返回结果为准
+ .height(this.itemHeightArray[item % 100])
.backgroundColor(this.colors[item % 5])
}, (item: string) => item)
}