HarmonyOS-瀑布流 WaterFlow

1、瀑布流的概念：瀑布流容器，由“行”和“列”分割的单元格所组成，通过容器自身的排列规则，将不同大小的“项目”自上而下。如下图所示：

2、核心用法：

WaterFlow({参数}) {
  FlowItem() {
    // 子组件
  }
  FlowItem() {
    // 子组件
  }
}
  .属性()

注意：WaterFlow的子组件必须只能是FlowItem（），这个FlowItem（）子组件可以有多个。在子组件里面写好布局，数据渲染即可实现瀑布流效果。

常用的参数：

        footer:设置WaterFlow尾部组件。

        scroller：可滚动组件的控制器，与可滚动组件绑定【不可以与List、Grid、Scroll等组件绑定同一个滚动控制对象】

        常用的属性：

名称	参数类型	描述
columnsTemplate	string	设置当前瀑布流组件布局列的数量，不设置时默认1列。 例如, '1fr 1fr 2fr' 是将父组件分3列，将父组件允许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。 默认值：'1fr'
rowsTemplate	string	设置当前瀑布流组件布局行的数量，不设置时默认1行。 例如, '1fr 1fr 2fr'是将父组件分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。
columnsGap	Length	设置列与列的间距。 默认值：0
rowsGap	Length	设置行与行的间距。 默认值：0
enableScrollInteraction	boolean	设置是否支持滚动手势，当设置为false时，无法通过手指或者鼠标滚动，但不影响控制器的滚动接口。 默认值：true
scrollBar	BarState	设置滚动条状态。 默认值：BarState.Off 说明： 滚动条位置和长度以已布局过的总高度和当前偏移为准，在瀑布流布局全部子节点之前随着滑动持续变化。
edgeEffect	value:EdgeEffect, options?:EdgeEffectOptions11+	设置边缘滑动效果。 - value：设置瀑布流组件的边缘滑动效果，支持弹簧效果和阴影效果。 默认值：EdgeEffect.None - options：设置组件内容大小小于组件自身时，是否开启滑动效果。 默认值：false

案例：

@Entry
@Component
struct waterFlowDemo {
  list: string[] = Array.from({ length: 30 })

  // 获取随机高度
  getRandomNumber() {
    return Math.floor(Math.random() * (300 - 200 + 1)) + 200;
  }

  // 随机颜色
  getRandomColor(): ResourceColor {
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    return `rgba(${r}, ${g}, ${b}, 0.5)`;
  }

  build() {
    WaterFlow({ footer: this.loadMore() }) {
      ForEach(this.list, (item: string, index: number) => {
        FlowItem() {
        }
        .width('100%')
        .height(this.getRandomNumber())
        .backgroundColor(this.getRandomColor())
      })
    }
    .rowsGap(10)
    .columnsGap(10)
    .columnsTemplate('1fr 1fr')
  }

  @Builder
  loadMore() {
    Text('加载更多')
      .width('100%')
      .fontSize(30)
      .fontColor(Color.White)
      .backgroundColor(Color.Pink)
  }
}