#星计划# HarmonyOS组件介绍-Waterflow 原创

左翼风发

发布于 2023-12-26 18:21

浏览

0收藏

背景

当我们浏览购物应用时，比如某宝，某书，会发现浏览的布局都是错落有致的，如图：
#星计划# HarmonyOS组件介绍-Waterflow-鸿蒙开发者社区

这个对应HarmonyOS应用开发就需要我们用到WaterFlow组件，本篇我们就此组件进行介绍。

WaterFlow组件介绍

1，WaterFlow是容器组件，内部分裂成行和列形式，通过容器自身的排列规则，将不同大小的“项目”自上而下，如瀑布般紧密布局。

该组件从API Version 9开始支持。官方doc地址：https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-container-waterflow-0000001582933637-V3
1.

简单解读

接口

WaterFlow(options?: {footer?: CustomBuilder, scroller?: Scroller})
1.

参数名	参数类型	必填	参数描述
footer	CustomBuilder	否	设置WaterFlow尾部组件。
scroller	Scroller	否	可滚动组件的控制器，与可滚动组件绑定。目前瀑布流仅支持Scroller组件的scrollToIndex接口。

属性

名称	参数类型	描述
columnsTemplate	string	设置当前瀑布流组件布局列的数量，不设置时默认1列。例如, ‘1fr 1fr 2fr’ 是将父组件分3列，将父组件允许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。并支持auto-fill。默认值：‘1fr’
rowsTemplate	string	设置当前瀑布流组件布局行的数量，不设置时默认1行。例如, '1fr 1fr 2fr’是将父组件分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。并支持auto-fill。默认值：‘1fr’
itemConstraintSize	ConstraintSizeOptions	设置约束尺寸，子组件布局时，进行尺寸范围限制。
columnsGap	Length	设置列与列的间距。默认值：0
rowsGap	Length	设置行与行的间距。默认值：0
layoutDirection	FlexDirection	设置布局的主轴方向。默认值：FlexDirection.Column

layoutDirection优先级高于rowsTemplate和columnsTemplate。根据layoutDirection设置情况，分为以下三种设置模式：

layoutDirection设置纵向布局（FlexDirection.Column 或 FlexDirection.ColumnReverse）

此时columnsTemplate有效（如果未设置，取默认值）。例如columnsTemplate设置为"1fr 1fr"、rowsTemplate设置为"1fr 1fr 1fr"时，瀑布流组件纵向布局，辅轴均分成横向2列。
layoutDirection设置横向布局（FlexDirection.Row 或 FlexDirection.RowReverse）

此时rowsTemplate有效（如果未设置，取默认值）。例如columnsTemplate设置为"1fr 1fr"、rowsTemplate设置为"1fr 1fr 1fr"时，瀑布流组件横向布局，辅轴均分成纵向3列。
layoutDirection未设置布局方向

布局方向为layoutDirection的默认值：FlexDirection.Column，此时columnsTemplate有效。例如columnsTemplate设置为"1fr 1fr"、rowsTemplate设置为"1fr 1fr 1fr"时，瀑布流组件纵向布局，辅轴均分成横向2列。

事件

名称功能描述

onReachStart(event: () => void) 瀑布流组件到达起始位置时触发。

onReachEnd(event: () => void) 瀑布流组件到底末尾位置时触发。

名称	功能描述
onReachStart(event: () => void)	瀑布流组件到达起始位置时触发。
onReachEnd(event: () => void)	瀑布流组件到底末尾位置时触发。

代码示例

export class DataInfo {
  type!:string
  src!:string
  color!:string
}

// 实现IDataSource接口的对象，用于瀑布流组件加载数据
export class WaterFlowDataSource implements IDataSource {
  private listeners: DataChangeListener[] = []
  private bcolor: string[] = [
    "#E29C45","#896C39","#D9B611","#BDDD22","#C9DD22","#AFDD22",
"#789262","#A3D900","#9ED900","#0EB83A","#0AA344","#00BC12","#0C8918","#1BD1A5",
"#2ADD9C","#48C0A3","#3DE1AD","#40DE5A","#9D2933","#BF242A","#FF4777","#FF461F",
"#F36838","#FFB61E","#FFC64B","#E9BB1D","#845A33","#16A951","#1685A9","#003472",
"#FFF2DF","#FFB3A7","#ED5736","#F00056","#F47983","#DB5A6B","#F20C00","#C93756",
"#F05654","#FF2121","#8C4356","#C83C23","#FF4C00","#FF4E20","#F35336","#CB3A56",
"#FF2D51","#C91F37","#EF7A82","#FF0097","#FF3300","#C3272B","#A98175","#C32136",
"#B36D61",  ]

  // 获取索引对应的数据
  public getData(index: number): DataInfo {
    {
      let bcin = index%50
      return { type: "img", src: "autoimage" + index + ".jpg", color: this.bcolor[bcin]}
    }
  }

  // 获取数据总数
  public totalCount(): number {
    return 100
  }

  // 注册改变数据的控制器
  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      this.listeners.push(listener)
    }
  }

  // 注销改变数据的控制器
  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener)
    if (pos >= 0) {
      this.listeners.splice(pos, 1)
    }
  }
}

@Entry
@Component
struct Index {
  @State message: string = 'WaterFlow'
  datasource: WaterFlowDataSource = new WaterFlowDataSource()
  @Builder itemFoot() {
    Column() {
      Text(`Footer`)
        .fontSize(50)
        .textAlign(TextAlign.Center)
        .backgroundColor("#F0F0F4")
        .width("100%")
        .height(150)
        .align(Alignment.Center)
        .margin({ top: 2 })
    }
  }

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
        Row() {
          WaterFlow({footer: this.itemFoot.bind(this)}) {
            LazyForEach(this.datasource, (item:DataInfo, idx:number) => {
              FlowItem() {
                Column() {
                  Text(`${item.type}${idx}`).fontSize(32).height('32').width('100')
                  if (idx % 4 == 0) {
                    Image($rawfile(item.src)).objectFit(ImageFit.Fill).height(100)
                  } else if (idx % 4 == 1) {
                    Image($rawfile(item.src)).objectFit(ImageFit.Fill).height(200)
                  } else if (idx % 4 == 2) {
                    Image($rawfile(item.src)).objectFit(ImageFit.Fill).height(240)
                  } else if (idx % 4 == 3) {
                    Image($rawfile(item.src)).objectFit(ImageFit.Fill).height(280)
                  }
                }.backgroundColor(item.color)
              }
              .width('100%')
            })
          }
          .alignSelf(ItemAlign.Center)
          .columnsTemplate('1fr 1fr 1fr')
          .layoutDirection(FlexDirection.Column)
          .columnsGap(12)
          .rowsGap(12)
          .height('100%')
          .width('100%')
          .padding({ left: 12, right: 12, top: 12, bottom: 12 })
          .backgroundColor(Color.White)
          .onReachEnd(() => {
            console.info("onReachEnd")
          })
        }.width('100%')
      }
      .width('100%')

    }
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.