鸿蒙瀑布流 WaterFlow

第九章

WaterFlow

9.1基本用法

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

9.2常用参数

9.3常用属性

@Entry
@Component
struct Page {
  @State list: number[] = Array.from({ length: 30 })
//随机高度
  getheight() {
    let h = Math.floor(Math.random() * 300 + 100);
    return h;
  }
//随机颜色
  getcolor() {
    let r = Math.floor(Math.random() * 256);
    let g = Math.floor(Math.random() * 256);
    let b = Math.floor(Math.random() * 256);
    return `rgba(${r},${g},${b},0.5)`;
  }

  @Builder
  footerBuilder() {
    Column() {
      Text('加载中...')
        .fontSize(20)
        .fontColor(Color.Black)
    }
    .width('100%')
    .alignItems(HorizontalAlign.Center)
  }

  scroller = new Scroller()

  build() {
    Column() {
      Button('回到顶部')
        .onClick(() => {
          this.scroller.scrollEdge(Edge.Top)
        })
      WaterFlow({
        footer: this.footerBuilder(),
        scroller: this.scroller
      }) {
        ForEach(this.list, () => {
          FlowItem() {
            Column() {

            }
          }
          .width('100%')
          .height(this.getheight())
          .backgroundColor(this.getcolor())
        })
      }
      .columnsTemplate('1fr 1fr')
      .columnsGap(5)
      .rowsGap(5)
      .edgeEffect(EdgeEffect.Fade)
    }
    .height('100%')
    .width('100%')
  }
}