waterFlow的三个关联属性columnsTemplate、rowsTemplate、layoutDirection的约束关系说明

Signed-off-by: Nlimeng <limeng208@huawei.com>

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) | 否   | 可滚动组件的控制器，与可滚动组件绑定。<br/>目前瀑布流仅支持Scroller组件的scrollToIndex接口。 |
 
 
 ## 属性
@@ -40,8 +40,21 @@ WaterFlow(options?: {footer?: CustomBuilder, scroller?: Scroller})
 | itemConstraintSize | [ConstraintSizeOptions](ts-types.md#constraintsizeoptions) | 设置约束尺寸，子组件布局时，进行尺寸范围限制。               |
 | columnsGap | Length |设置列与列的间距。 <br>默认值：0|
 | rowsGap | Length |设置行与行的间距。<br> 默认值：0|
-| layoutDirection | [FlexDirection](ts-appendix-enums.md#flexdirection) |设置布局的主轴方向。|
+| layoutDirection | [FlexDirection](ts-appendix-enums.md#flexdirection) |设置布局的主轴方向。<br/>默认值：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)
       }